DOM 事件深刻淺出（一）

在項目開發時，咱們時常須要考慮用戶在使用產品時產生的各類各樣的交互事件，好比鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行爲都是前端DOM事件的組成部分，不一樣的DOM事件會有不一樣的觸發條件和觸發效果。本文就將帶你們深刻淺出地瞭解DOM事件的那些屬性和方法。

首先在介紹DOM事件以前咱們先來認識下DOM的不一樣級別。針對不一樣級別的DOM，咱們的DOM事件處理方式也是不同的。

DOM級別與DOM事件

DOM級別一共能夠分爲4個級別：DOM0級，DOM1級，DOM2級和 DOM3級，而DOM事件分爲3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。以下圖所示：

有人可能會問，爲何沒有DOM1級事件處理呢？由於1級DOM標準中並無定義事件相關的內容，因此沒有所謂的1級DOM事件模型。

關於DOM級別這裏不作詳細的介紹，下面主要介紹下不一樣級別DOM中的不一樣事件。

1.DOM0級事件

在瞭解DOM0級事件以前，咱們有必要先了解下HTML事件處理程序，也是最先的這一種的事件處理方式，代碼以下：

<button type="button" onclick="showFn()"></button> <script> function showFn() { alert('Hello World'); } </script>

 

以上代碼咱們經過直接在HTML代碼裏定義了一個onclick的屬性觸發showFn方法，這樣的事件處理程序最大的缺點就是HTML於JS強耦合，咱們一旦須要修改函數名就得修改兩個地方。固然其優勢是不須要操做DOM來完成事件的綁定。

那麼什麼是DOM0級處理事件呢？DOM0級事件就是將一個函數賦值給一個事件處理屬性，好比：

<button id="btn" type="button"></button> <script> var btn = document.getElementById('btn'); btn.onclick = function() { alert('Hello World'); } // btn.onclick = null; 解綁事件  </script>

 

以上代碼咱們給button定義了一個id，經過JS獲取到了這個id的按鈕，並將一個函數賦值給了一個事件處理屬性onclick，這樣的方法即是DOM0級處理事件的體現。咱們能夠經過給事件處理屬性賦值null來解綁事件。

DOM0級事件處理程序的缺點在於一個處理程序沒法同時綁定多個處理函數，好比我還想在按鈕點擊事件上加上另一個函數。

2.DOM2級事件

DOM2級事件在DOM0級事件的基礎上彌補了一個處理程序沒法同時綁定多個處理函數的缺點，容許給一個處理程序添加多個處理函數。代碼以下：

<button id="btn" type="button"></button> <script> var btn = document.getElementById('btn'); function showFn() { alert('Hello World'); } btn.addEventListener('click', showFn, false); // btn.removeEventListener('click', showFn, false); 解綁事件  </script>

 

DOM2級事件定義了addEventListener和removeEventListener兩個方法，分別用來綁定和解綁事件，方法中包含3個參數，分別是綁定的事件處理屬性名稱（不包含on）、處理函數和是否在捕獲時執行事件處理函數。若是咱們還須要添加一個鼠標移入的方法，只須要：

btn.addEventListener('mouseover', showFn, false);

 

這樣點擊按鈕和鼠標移入時都將觸發showFn方法。

須要注意的是IE8級如下版本不支持addEventListener和removeEventListener，須要用attachEvent和detachEvent來實現：

btn.attachEvent('onclick', showFn); // 綁定事件 
btn.detachEvent('onclick', showFn); // 解綁事件

 

這裏咱們不須要傳入第三個參數，由於IE8級如下版本只支持冒泡型事件。

3.DOM3級事件

DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，所有類型以下：

1. UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
2. 焦點事件，當元素得到或失去焦點時觸發，如：blur、focus
3. 鼠標事件，當用戶經過鼠標在頁面執行操做時觸發如：dbclick、mouseup
4. 滾輪事件，當使用鼠標滾輪或相似設備時觸發，如：mousewheel
5. 文本事件，當在文檔中輸入文本時觸發，如：textInput
6. 鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發，如：keydown、keypress
7. 合成事件，當爲IME（輸入法編輯器）輸入字符時觸發，如：compositionstart
8. 變更事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified

同時DOM3級事件也容許使用者自定義一些事件。

DOM事件流

上文中講到了addEventListener的第三個參數爲指定事件是否在捕獲階段執行，設置爲true表示事件在捕獲階段執行，而設置爲false表示事件在冒泡階段執行。那麼什麼是事件冒泡和事件捕獲呢？能夠用下圖來解釋：

1.事件冒泡

所謂事件冒泡就是事件像泡泡同樣從最開始生成的地方一層一層往上冒，好比上圖中a標籤爲事件目標，點擊a標籤後同時也會觸發p、li上的點擊事件，一層一層向上直至最外層的html或document。下面是代碼示例：

<div id="box">
    <a id="child">事件冒泡</a> </div> <script> var box = document.getElementById('box'), child = document.getElementById('child'); child.addEventListener('click', function() { alert('我是目標事件'); }, false); box.addEventListener('click', function() { alert('事件冒泡至DIV'); }, false); </script>

 

上面的代碼運行後咱們點擊a標籤，首先會彈出’我是目標事件’提示，而後又會彈出’事件冒泡至DIV’的提示，這便說明了事件自內而外向上冒泡了。

那麼咱們如何阻止事件冒泡呢？這裏就涉及事件的Event對象中的stopPropagation方法，以下：

child.addEventListener('click', function(e) {
    alert('我是目標事件');
    e.stopPropagation();
}, false);

 

加上stopPropagation方法後，咱們再次點擊a標籤就不會觸發div上的click事件了。

2.事件捕獲

和事件冒泡相反，事件捕獲是自上而下執行，咱們只須要將addEventListener的第三個參數改成true就行。

<div id="box">
    <a id="child">事件冒泡</a> </div> <script> var box = document.getElementById('box'), child = document.getElementById('child'); child.addEventListener('click', function() { alert('我是目標事件'); }, true); box.addEventListener('click', function() { alert('事件冒泡至DIV'); }, true); </script>

 

此時咱們點擊a標籤，首先彈出的是’事件冒泡至DIV’，其次彈出的是’我是目標事件’，正好與事件冒泡相反。

總結

本文主要介紹了不一樣DOM級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發原理和方法。熟練地使用不一樣級別的DOM事件而且解決相應的瀏覽器兼容性問題對咱們的前端項目開發會頗有幫助。在下篇文章中，我將給你們介紹DOM事件中Event對象的屬性和方法。

​