事件流動（EVENT FLOW）

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

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

捕獲階段（capture phase）

捕獲階段的定義如下(w3c)：The event object propagate through the target's ancestors from the defaultView to the target's parent.

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

document    1
  v
body    2
  v
div    3
  v
button
 

 

一般沒太大需要監聽捕獲階段的事件；如果確實希望這麼做，需要將 addEventListener的第三個引數設定為true：  

// 第三個引數設定是否為捕獲階段，預設為false
element.addEventListener('click', function() {}, true)

目標階段（target phase）

目標階段的定義是（w3c）：The event object arrive at the event object's event target.事件物件到達事件目標。

例子裡面，就是事件在button上觸發的。addEventListener可以監聽目標階段的事件：

element.addEventListener('click', function() {})

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

冒泡階段（bubble phase）

冒泡階段的定義（w3c）：The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView.

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

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

document    3
  ^
body    2
  ^
div    1
  ^
button

"bubbles"

Event下的bubbles屬性標明該事件是否為可冒泡的。一旦該值為false，則說明 evnet不可冒泡，那其流動也會在第二階段“目標階段”後就終止。

    摘自：
作者：butterandfly
連結：https://www.jianshu.com/p/382895a4027d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。