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

今天從事件流，DOM0級(jí)事件綁定，DOM2級(jí)事件綁定，低版本IE事件綁定等方面來學(xué)習(xí)事件。

事件流

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

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

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

DOM0級(jí)事件綁定

DOM分為級(jí)別，DOM0級(jí)、1級(jí)、2級(jí)、3級(jí)，是不同的標(biāo)準(zhǔn)，標(biāo)準(zhǔn)一直在升級(jí)。

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

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

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

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

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

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

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

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

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

DOM2級(jí)事件綁定

DOM1級(jí)規(guī)范中，沒有對(duì)事件進(jìn)行改動(dòng)，所以不再贅述。

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

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

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

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

比如：

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

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

addEventListener可以重復(fù)添加相同事件名的事件：我們給box1的綁定了兩個(gè)事件冒泡階段的監(jiān)聽，不會(huì)覆蓋，兩個(gè)監(jiān)聽的函數(shù)都會(huì)執(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方法沒有第三個(gè)參數(shù)，也就是說，不能選擇監(jiān)聽捕獲、冒泡，只能監(jiān)聽冒泡階段。

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

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

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

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

并且，同一個(gè)事件名的多個(gè)監(jiān)聽，會(huì)反著執(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é)果會(huì)彈出3、2、1。