DOM冒泡事件

2022-08-26 04:48:06 字數 2199 閱讀 5320

語法:

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

例如:

btn.onclick = function(){}

細節:只能註冊乙個事件處理函式

相容:所有主流瀏覽器都相容

語法:事件源.addeventlistener(事件名稱,事件處理程式,在哪個階段執行)

例如:

btn.addeventlistener(「click」,function (){},false)

細節:事件名稱不能帶有on

可以為事件繫結多個處理程式

在事件處理函式中,this是對應的事件源

相容:ie8不支援

語法:事件源.attachevent(on+事件名稱,事件處理程式)

例如:

btn.attachevent(「onclick」,function(){})

細節:也可以註冊多個事件

註冊的事件要帶上on

在事件處理函式中,this是window

相容ie6到ie10支援,其餘都不支援

原理:判斷當前瀏覽器支援誰,支援哪個就用哪個來註冊

function

addlistener(element,event,fn)

else

if(element.addeventlistener)

else

}

方法:事件源.on+事件名 = null;

語法:事件源.removeeventlistener(事件名,處理程式,在哪個階段)

例子:

btn.removeeventlistener(「click」,clickhandel,false)

細節:如果你在不同的階段分別繫結了兩個函式,要分開移除

移除的是使用addeventlistener繫結的處理程式

相容:ie8不支援

語法:事件源.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的事件名稱

利用這個屬性,我們可以實現給乙個元素註冊多個事件,卻呼叫同乙個函式

DOM 事件流,以及阻止冒泡

dom 事件流共有三個階段 1 事件捕獲階段 當事件發生的時候,事件從window開始依次往子元素傳遞 注意 在整個捕獲的過程中,如果父元素有同類事件也會被一併觸發 2 確定目標階段 找到目標 3 事件冒泡階段 從事件目標開始處理事件,處理完以後依次往父元素傳遞,一直傳到window 1 在標準瀏覽...

DOM元素的事件捕獲和冒泡

b 事件 當html頁面上發生乙個事件時,每個層次上的dom元素都有機會處理這個事件。以下面的html 為例 how are you 該頁面在瀏覽器上呈現的效果如下圖 html頁面呈現的效果 如果單擊了頁面中的a 錨 元素,那麼,和元素全都應該得到響應這次單擊的機會。因為這 3個元素同時都處於使用者...

關於DOM2級事件的事件捕獲和事件冒泡

dom2級事件中addeventlistener的執行機制,多個addeventlistener同時新增時的執行先後規律 w3c的dom事件觸發分為三個階段 事件捕獲階段,即由最頂層元素 一般是從window元素開始,有的瀏覽器是從document開始,至於其中的差別我稍後會更新 開始,逐次進入do...