Created by Jerry Wang, last modified on Jun 06, 2015

source link:?http://www.ido321.com/1570.html 這個(gè)example 有一個(gè)陷阱，如果測(cè)試用的script不寫(xiě)在window.ready事件里，將得不到效果。 事件捕獲和事件冒泡是事件流中的兩個(gè)階段，任何事件產(chǎn)生時(shí)，如點(diǎn)擊一個(gè)按鈕，將從最頂端的容器開(kāi)始（一般是html的根節(jié)點(diǎn)）。瀏覽器會(huì)向下遍歷DOM樹(shù)直到找到觸發(fā)事件的元素
點(diǎn)擊button 1：
target: button 至此target node處理完了，繼續(xù)處理hierarchy樹(shù)的下一個(gè)節(jié)點(diǎn)：body. 此時(shí)event.target 還是button： 然后繼續(xù)處理body下面的div 節(jié)點(diǎn)：

找到目的節(jié)點(diǎn)了： 一旦瀏覽器找到該元素，事件流就進(jìn)入事件目標(biāo)階段，該階段完成后，瀏覽器會(huì)沿DOM樹(shù)向上冒泡直到最頂層容器，看看是否有其它元素需要使用同一個(gè)事件。 大多數(shù)現(xiàn)代庫(kù)使用冒泡監(jiān)聽(tīng)，而在捕獲階段處理。瀏覽器包含一個(gè)方法來(lái)管理事件冒泡。事件處理程序可以調(diào)用stopPropagation告訴DOM事件停止冒泡 第二個(gè)方式是調(diào)用stopImmediatePropagation，它不僅停止冒泡，也會(huì)阻止這個(gè)元素上其它監(jiān)聽(tīng)當(dāng)前事件的處理程序觸發(fā)。然而,停止傳播事件時(shí)要小心,因?yàn)槟悴恢朗欠裼衅渌蠈拥腄OM元素可能需要知道當(dāng)前事件。

This example also shows how to raise and catch custom event via jQuery:

<img src=“https://cloud.githubusercontent.com/assets/5669954/26556349/4ca0cb16-449a-11e7-8d2e-fb47d690b0f2.png)
要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的JS Event handler example - event capture and bubble的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。