JS的事件冒泡事件和事件捕獲分析

首先來說一下兩者的定義：

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。

ie 5.5: div -> body -> document

ie 6.0: div -> body -> html -> document

mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確的物件

（3）dom事件流：同時支援兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及dom中的所有物件，從document物件開始，也在document物件結束。

結論：他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。預設false,即事件冒泡。jquery的e.stoppropagation

會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發了。

例項

這是html結構 123

<divid="parent">

<divid="child" class="child">

現在我們給它們繫結上事件

document.getelementbyid("parent").addeventlistener("click",function
(e))
document.getelementbyid("child").addeventlistener("click",function
(e))

結果：

child事件被觸發，child

parent事件被觸發，parent

結論：先child，然後parent。事件的觸發順序自內向外，這就是事件冒泡。

現在改變第三個引數的值為true

document.getelementbyid("parent").addeventlistener("click",function
(e),
true
)document.getelementbyid("child").addeventlistener("click",function
(e),
true)

結果：

parent事件被觸發，parent

child事件被觸發，child

結論：先parent,然後child。事件觸發順序變更為自外向內，這就是事件捕獲。

貌似沒什麼卵用，上乙個利用事件冒泡的案例，反正我是經常會用到。

需求是這樣的：滑鼠放到li上對應的li背景變灰。

利用事件冒泡實現：

$("ul").on("mouseover","li",function
(e))

也許有人會說，我們直接給所有li都綁上事件也可以啊，一點也不麻煩，只要……

$("li").on("mouseover",function
())

是，這樣也行。而且從**簡潔程度上，兩者是相若彷彿的。但是，前者少了乙個遍歷所有li節點的操作，所以在效能上肯定是更優的。

還有就是，如果我們在繫結事件完成後，頁面又動態的載入了一些元素……

這時候，第二種方案，由於繫結事件的時候item7還不存在，所以為了效果，我們還要給它再繫結一次事件。而利用冒泡方案由於是給ul綁的事件…

另：利用事件冒泡處理動態元素事件繫結的方法，專業術語叫事件委託，$("ul").on("click","li",function(){});這樣寫有事件委託。$("ul li").on();這樣寫法則沒有。

JS的事件冒泡事件和事件捕獲分析

js 事件冒泡和事件捕獲

Js冒泡事件和捕獲事件

JS事件冒泡事件捕獲和事件委託

JS的事件冒泡事件和事件捕獲分析

js 事件冒泡和事件捕獲

Js冒泡事件和捕獲事件

JS事件冒泡 事件捕獲和事件委託

相關推薦

JS事件冒泡事件捕獲和事件委託