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

2022-07-21 17:24:14 字數 1780 閱讀 2239

dom2級事件中addeventlistener的執行機制,多個addeventlistener同時新增時的執行先後規律:

w3c的dom事件觸發分為三個階段:

①、事件捕獲階段,即由最頂層元素(一般是從window元素開始,有的瀏覽器是從document開始,至於其中的差別我稍後會更新)開始,逐次進入dom內部,最後到達目標元素,依次執行繫結在其上的事件

②、處於目標階段,檢測機制到達目標元素,按事件註冊順序執行繫結在目標元素上的事件。

③、事件冒泡階段,從目標元素出發,向外層元素冒泡,最後到達頂層(window或document),依次執行繫結再其上的事件。

在addeventlistener中,利用第三個引數控制其是從哪個階段開始,「true」是從捕獲階段開始,而「false」則是跳過捕獲階段,從冒泡階段開始。 看乙個簡單的例子:

123

2425

2627

28

在這個例子裡,如果我們點選內層元素inner,那麼處於捕獲階段的1最先彈出,接下來是目標元素2彈出,最後是處於冒泡階段的3彈出,即:1,2,3. 即使在**裡變換三個繫結事件的順序,只要點選的是inner,這個執行順序就不會變。

那麼問題來了,如果點選的是外層outer的話呢?

要明白這個問題,我們必須明確一點:目標事件在哪一層,事件流就在哪一層回流,即使在outer事件下還有許多子孫節點,事件流都不會在outer之後往內流,此時,inner上的事件不會被觸發,因此在這段**中,只會彈出1和3。

那麼這兩個數字哪個先彈呢?由於此時事件處於第二階段,即「處於目標階段」,彈出順序取決的也不再是捕獲或冒泡,而是誰在**中先註冊,因此,在這段**中,彈出的是:1→3.

綜上所述,事件在dom中的執行順序為:外層捕獲事件→內層捕獲事件→先註冊的目標事件→後註冊的目標事件→內層冒泡事件→外層冒泡事件

讓我們再看個例子來加深這個概念:

131

3233

3435

3637

38

在這段**裡,box上的捕獲事件最先執行,然後是outer上的捕獲事件,然後是inner上先註冊的事件,然後是inner上後註冊的事件,最後是box上的冒泡事件 彈出順序為:1→2→3.2→3.1→4

補充一點,在ie8-中,由於addeventlister不起作用,我們使用attachevent方法來繫結事件,此時在第二階段,也就是處於目標階段,如果目標元素上繫結了兩個事件,那麼其執行順序和addeventlister相反:誰後註冊誰先執行.

接下來我們將問題再公升級,如果dom0級事件和dom2級事件同時存在,那執行順序會是怎樣呢?

看下面的事例**:

1

2325

2627

2829

3031

3233

此案例中,我將outer的div在捕獲階段和冒泡階段都繫結了點選事件,同時還在繫結了dom0級的點選事件處理函式,這時如果我們點選inner,我們會發現,事件的執行順序是這樣的  obox-dom2捕獲--> outer-dom2捕獲 --> inner-dom2冒泡 -->  inner-dom2捕獲 --> outer-dom2冒泡 --> outer-dom0 click! --> obox-dom2冒泡 由此我們可以得出乙個結論:當繫結dom0級事件元素不是目標元素時,那麼繫結dom0級事件的處理是在冒泡階段處理並按事件註冊的先後順序執行(w3c先註冊的先執行) ,如果繫結dom0級事件的元素是目標元素時,則不論是捕獲階段繫結的處理函式還是冒泡階段繫結的處理函式以及dom0級事件處理函式,他們的執行順序都是按照註冊的順序執行(w3c先註冊的先執行) 。

事件流程以及dom2級事件繫結

事件流程分為三個階段 捕獲階段 目標階段 冒泡階段。捕獲階段 事件從最頂層元素開始執行,一層層往下,直到精確元素。目標階段 事件在精確元素上執行。冒泡階段 事件從精確元素開始執行,一層層往上,直到頂層元素 注 高階瀏覽器的頂層元素是window,ie8以下的瀏覽器頂層元素是document dom2...

事件繫結 DOM0級事件繫結和DOM2級事件繫結

box.onclick function 元素.事件行為 函式 box.onclick function 相當於給乙個元素的屬性賦值,只能賦乙個值,後面如果再賦值就會覆蓋前面的值,所以說dom0級事件只可以繫結一次,如果繫結多次,後面的會把前面的給覆蓋了,因為是乙個賦值的過程,乙個屬性只能賦乙個值 ...

dom0 和 dom2事件 簡略

dom級別 4級 dom0,dom1,dom2,dom3 dom事件 3級 dom0級事件 dom2級事件 dom3級事件 為什麼 沒有 dom1級事件?因為 dom1級 中 沒有定義 事件相關的 內容 dom0 通過 onclick 繫結事件 或者 input.nclick function on...