例子：
<div>
  <button id="btn">Click Me!</button> </div>

對於上面例子，如果想知道點選後例子的執行順序，此時就與Event flow(事件流動)相關了。

事件流動

DOM事件不單單隻會在一個Element上觸發，它還會流向其他Element。事件的流動通常會經歷這麼三個階段：

捕獲階段 -> 目標階段 -> 冒泡階段

捕獲階段（capture phase）

定義：事件物件在事件目標的祖先中上到下順向傳播，從最頂層的defaultView到事件目標的（直系）父元素。

捕獲階段發生在整個事件流動的開始。在這階段裡事件會從父（主幹）到子（分支）由上往下傳播，被元素一層層地捕獲。
文章開頭的例子裡面，捕獲階段的click事件會依次在document、body、div上觸發：

目標階段（target phase）

定義：事件物件到達事件目標。

就如例子中，事件在button上觸發。

如果事件是不可冒泡的，那整個事件流動會到此為止，不會發生下面的冒泡階段。

冒泡階段（bubble phase）

定義：事件物件會在事件目標的祖先元素裡反向傳播，由開始的父元素到最後的defaultView（document）。

冒泡階段發生在最後，這也是我們最為熟悉的一個階段。在這階段裡事件會從子（分支）到父（主幹）逆向傳播，看起來像是一個水裡的泡泡往上冒。
例子裡面，冒泡階段的click事件會依次在div、body、document上觸發：