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

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

找到目的節點了： 一旦瀏覽器找到該元素，事件流就進入事件目標階段，該階段完成后，瀏覽器會沿DOM樹向上冒泡直到最頂層容器，看看是否有其它元素需要使用同一個事件。 大多數現代庫使用冒泡監聽，而在捕獲階段處理。瀏覽器包含一個方法來管理事件冒泡。事件處理程序可以調用stopPropagation告訴DOM事件停止冒泡 第二個方式是調用stopImmediatePropagation，它不僅停止冒泡，也會阻止這個元素上其它監聽當前事件的處理程序觸發。然而,停止傳播事件時要小心,因為你不知道是否有其它上層的DOM元素可能需要知道當前事件。

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的原創文章，請關注公眾號"汪子熙”:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。