JS的事件冒泡和事件捕獲

2021-08-21 06:31:23 字數 1585 閱讀 6979

先上結論:他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數,就是控制事件觸發順序是否為事件捕獲。true,事件捕獲;false,事件冒泡。預設false,即事件冒泡。jquery的e.stoppropagation會阻止冒泡,意思就是到我為止,我的爹和祖宗的事件就不要觸發了。

這是html結構

1

2

3

<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",function

(e))

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

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

())

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

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

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

高下立判!

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 捕獲...

Js冒泡事件和捕獲事件

js中冒泡事件和捕獲事件 冒泡事件 冒泡事件是從裡向外,即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發,這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到dom樹的最上層 捕獲事件 捕獲事件是從頁面的最上層到被繫結元素都會觸發。ie只支援事件冒泡,不支援事件捕獲 冒泡事件和捕獲...

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

如上圖所示 事件冒泡 結構上從內到外 如上圖所示 事件捕獲 結構上從外到內 使用addeventlistener 方法指定事件是否在捕獲或冒泡階段執行 element.addeventlistener event,function,usecapture usecapture 可選。布林值,指定事件是...