【W(wǎng)eb前端基礎知識】DOM級事件綁定

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

事件流

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

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

我們?yōu)榱嗣枋鍪录�的傳播順序，特意人為�?guī)定了兩個階段：捕獲階段capture pahse、冒泡階段bubbling phase。點擊頁面上的一個元素，事件在哪個階段觸發(fā)，這取決于添加事件監(jiān)聽的方法。

DOM0級事件綁定

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

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

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

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

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

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

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

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

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

以JS代碼后出現(xiàn)的為準，它會覆蓋先寫的函數(shù)。所以點擊box彈出2。

DOM2級事件綁定

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

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

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

第2個參數(shù)：函數(shù)可以是匿名函數(shù)，也可以是有名函數(shù)

第3個參數(shù)：布爾值，true表示監(jiān)聽捕獲、false表示監(jiān)聽冒泡階段

比如：

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

第三個參數(shù)是true，表示監(jiān)聽box的捕獲階段的單擊事件。

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

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

先彈出1，然后彈出2。

低版本IE的事件綁定

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

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

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

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

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

第二個參數(shù)，就是事件處理函數(shù)

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

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

并且，同一個事件名的多個監(jiān)聽，會反著執(zhí)行：

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. }); 

結(jié)果會彈出3、2、1。