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

source link:?http://www.ido321.com/1570.html 這個(gè)example 有一個(gè)陷阱，如果測(cè)試用的script不寫在window.ready事件里，將得不到效果。

事件捕獲和事件冒泡是事件流中的兩個(gè)階段，任何事件產(chǎn)生時(shí)，如點(diǎn)擊一個(gè)按鈕，將從最頂端的容器開始（一般是html的根節(jié)點(diǎn)）。瀏覽器會(huì)向下遍歷DOM樹直到找到觸發(fā)事件的元素
點(diǎn)擊button 1：

target: button

至此target node處理完了，繼續(xù)處理hierarchy樹的下一個(gè)節(jié)點(diǎn)：body. 此時(shí)event.target 還是button：

然后繼續(xù)處理body下面的div 節(jié)點(diǎn)：

找到目的節(jié)點(diǎn)了：

一旦瀏覽器找到該元素，事件流就進(jìn)入事件目標(biāo)階段，該階段完成后，瀏覽器會(huì)沿DOM樹向上冒泡直到最頂層容器，看看是否有其它元素需要使用同一個(gè)事件。 大多數(shù)現(xiàn)代庫使用冒泡監(jiān)聽，而在捕獲階段處理。瀏覽器包含一個(gè)方法來管理事件冒泡。事件處理程序可以調(diào)用stopPropagation告訴DOM事件停止冒泡

第二個(gè)方式是調(diào)用stopImmediatePropagation，它不僅停止冒泡，也會(huì)阻止這個(gè)元素上其它監(jiān)聽當(dāng)前事件的處理程序觸發(fā)。然而,停止傳播事件時(shí)要小心,因?yàn)槟悴恢朗欠裼衅渌蠈拥腄OM元素可能需要知道當(dāng)前事件。

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

總結(jié)

以上是生活随笔為你收集整理的JavaScript事件处理的例子：事件捕捉和冒泡 - event capture and bubble的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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