【Web前端基礎知識】DOM級事件綁定

今天從事件流，DOM0級事件綁定，DOM2級事件綁定，低版本IE事件綁定等方面來學習事件。

事件流

當你單擊了某個元素，單擊事件不僅僅發生在這個元素上，你也單擊了它的父元素、父元素的父元素、……它的祖先元素，甚至單擊了整個頁面。

“事件流”描述的是頁面上各個元素接收事件的順序。

我們為了描述事件的傳播順序，特意人為規定了兩個階段：捕獲階段capture pahse、冒泡階段bubbling phase。點擊頁面上的一個元素，事件在哪個階段觸發，這取決于添加事件監聽的方法。

DOM0級事件綁定

DOM分為級別，DOM0級、1級、2級、3級，是不同的標準，標準一直在升級。

我們之前學習的 obj.onclick = function () {} 這種注冊監聽的寫法，就是DOM0級的事件綁定方法。就是把onclick當做屬性添加給了oDiv元素。

通過實驗，我們發現，這種事件添加方法，只能監聽冒泡過程。事件的捕獲階段，沒有監聽成功。

這里需要注意，在IE9、Chrome里面，事件會冒泡到window對象，而IE6、7、8僅僅冒泡到document對象。

另外，用這種方法綁定的監聽，this指的是觸發這個事件的元素，沒有任何的瀏覽器兼容問題。

DOM0級還有一種寫法，直接將監聽寫在標簽里面，工作中不許用：

寫在HTML標簽里面代碼耦合性很強，三層沒有完全分離，工作中不用的。這種寫法，也是監聽冒泡階段。

用DOM0級添加事件監聽，同一個元素不能有兩個同樣事件監聽，比如：

1. box.onclick = function () { 
2.    alert(1); 
3.  } 
4.    box.onclick = function () { 
5.    alert(2); 
6.  } 

以JS代碼后出現的為準，它會覆蓋先寫的函數。所以點擊box彈出2。

DOM2級事件綁定

DOM1級規范中，沒有對事件進行改動，所以不再贅述。

DOM2級做了新的規范，不用on來綁定監聽了，而是使用一個方法 addEventListener()。它接受三個參數：什么事件、函數、是否監聽捕獲階段。

第1個參數：事件名不用寫on，比如：click、mouseover 、mouseout

第2個參數：函數可以是匿名函數，也可以是有名函數

第3個參數：布爾值，true表示監聽捕獲、false表示監聽冒泡階段

比如：

1. box.addEventListener("click", funciton () { 
2.     alert(1); 
3. }, true); 

第三個參數是true，表示監聽box的捕獲階段的單擊事件。

addEventListener可以重復添加相同事件名的事件：我們給box1的綁定了兩個事件冒泡階段的監聽，不會覆蓋，兩個監聽的函數都會執行，按照代碼執行順序。

1. box.addEventListener("click", funciton () { 
2.     alert(1); 
3. }, true); 
4. box.addEventListener("click", funciton () { 
5.     alert(2); 
6. }, true); 

先彈出1，然后彈出2。

低版本IE的事件綁定

現在仍有少量的用戶在使用IE8，所以我們把低版本的IE事件綁定說明一下。

IE6、7、8不支持addEventListener()方法，支持 attachEvent() 方法。

1. box.attachEvent("onclick", function () { 
2.   alert("click"); 
3. }); 

attachEvent方法沒有第三個參數，也就是說，不能選擇監聽捕獲、冒泡，只能監聽冒泡階段。

第一個參數，必須寫on，和addEventListener()不一樣;

第二個參數，就是事件處理函數

沒有第三個參數，只能監聽冒泡。所以和DOM0事件寫法一樣(比如onclick)。

低版本IE的事件監聽attachEvent：事件處理函數里面的this，不是觸發事件的這個元素，而是window對象!

并且，同一個事件名的多個監聽，會反著執行：

1. box.attachEvent("onclick", function () { 
2.   alert(1); 
3. }); 
4. box.attachEvent("onclick", function () { 
5.   alert(2); 
6. }); 
7. box.attachEvent("onclick", function () { 
8.   alert(3); 
9. }); 

結果會彈出3、2、1。