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: