一、注冊事件的三種方式

1 on的方式

語法：

事件源.on+事件名稱 = 事件處理程序

例如：

btn.onclick = function(){}

?

?

細節：

只能注冊一個事件處理函數

兼容：

所有主流瀏覽器都兼容

2?? addEventListener

語法：

事件源.addEventListener(事件名稱,事件處理程序，在哪個階段執行)

例如：

btn.addEventListener(“click”,function (){},false)

?

?

細節：

事件名稱不能帶有on

可以為事件綁定多個處理程序

在事件處理函數中，this是對應的事件源

兼容：

ie8不支持

3?? attachEvent

語法：

事件源.attachEvent(on+事件名稱，事件處理程序)

例如：

btn.attachEvent(“onclick”,function(){})

?

?

細節：

也可以注冊多個事件

注冊的事件要帶上on

在事件處理函數中，this是window

兼容

ie6到ie10支持，其余都不支持

?

4?? 注冊事件的兼容寫法

原理：

判斷當前瀏覽器支持誰，支持哪個就用哪個來注冊

function addListener(element,event,fn){if (element.attachEvent){element.attachEvent(“on”+event,fn)}else if(element.addEventListener) {element.addEventListener(event,fn,false)}else {element["on"+event] = fn;}}

?

?

?

二、移除事件綁定的處理程序

1 on的方式

方法：

事件源.on+事件名 = null;

2?? removeEventListener

語法：

事件源.removeEventListener(事件名,處理程序,在哪個階段)

例子：

btn.removeEventListener(“click”,clickHandel,false)

?

?

細節：

如果你在不同的階段分別綁定了兩個函數，要分開移除

移除的是使用addEventListener綁定的處理程序

兼容：

ie8不支持

3?? detachEvent

語法：

事件源.detachEvent(on+事件名,處理程序)

例子：

btn.detachEvent(“onclick”,clickHandle)

?

?

細節：

移除的是使用attachEvent綁定的處理程序

兼容：

ie6-ie10支持，其余不支持

?

三、事件的三個階段

事件的三個階段分為：事件捕獲階段、事件目標階段、事件冒泡階段

?

要知道事件的階段，需要通過一個屬性：?event.eventPhase?

?

當eventPhase的值為1的時候，是事件捕獲階段，為2的時候是事件的目標階段，為3的時候是冒泡階段

?

事件在出現的時候

只會包含兩個階段：

a)??? 捕獲和目標

b)??? 冒泡和目標

冒泡和捕獲不會同時出現

?

三個階段的異同：

事件在觸發的時候，是有一個過程的

?

事件冒泡：后代元素觸發某一個類型的事件，同時這個元素會傳遞到前代元素，并且觸發前代元素的同類事件

事件捕獲：發生某種類型的事件的時候，先有捕獲的過程，先從前代元素遞到觸發事件的事件源子元素

事件目標階段：事件觸發到達事件源的時候

阻止冒泡

StopPropagation（）；//IE8不支持 CancelBubble=true；

?

?

?

On+eventType? 相應的解綁方式：事件源.eventType=null；

?

AddEventListener? 相應的解綁方式：事件源.removeEventListener（type，已經綁定的處理程序的函數名，對應的階段）；????????

以匿名函數的時候綁定的，是無法解綁的

?

如果綁定的時候，執行處理程序的階段不同（第三個參數的true和false不同），在解綁的時候，也必須使用相應的觸發階段才能成功解綁，簡而言之，如果是綁定的時候是false，解綁的時候也必須是false

?

解綁的時候只會解綁相同的函數名，如果不同就不會解綁，同名的函數重復綁定無效

?

attachEvent?? 相應的解綁方式：事件源.detachEvent（“on”+type，對應的綁定的函數名）；、如果是以匿名函數的方式，也是無法解綁

每次解綁，函數名必須相同，否則不會解綁

總結：是用什么方式綁定事件處理程序，就必須使用相應的解綁方式解綁

四、事件的類型

得知事件的類型也是通過事件的一個屬性獲得

event.type

得到的是不帶on的事件名稱

?

利用這個屬性，我們可以實現給一個元素注冊多個事件，卻調用同一個函數

轉載于:https://www.cnblogs.com/chrischan/p/6730494.html

總結

以上是生活随笔為你收集整理的DOM冒泡事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。