Event flow(事件流)

流：

流的概念，在現今的JavaScript中隨處可見。比如說React中的單向數據流，Node中的流，又或是今天本文所講的DOM事件流。都是流的一種生動體現。至於流的具體概念，我們采用下文的解釋：

用術語說流是對輸入輸出設備的抽象。以程序的角度說，流是具有方向的數據

事件流之事件冒泡與事件捕獲：

在瀏覽器發展的過程中，開發團隊遇到了一個問題。那就是頁面中的哪一部分擁有特定的事件？

可以想象畫在一張紙上的一組同心圓，如果你把手指放在圓心上，那麽你的手指指向的其實不是一個圓，而是紙上所有的圓。放到實際頁面中就是，你點擊一個按鈕，事實上你還同時點擊了按鈕所有的父元素。

開發團隊的問題就在於，當點擊按鈕時，是按鈕最外層的父元素先收到事件並執行，還是具體元素先收到事件並執行？所以這兒引入了事件流的概念。

事件流所描述的就是從頁面中接受事件的順序。

因為有兩種觀點，所以事件流也有兩種，分別是事件冒泡和事件捕獲。現行的主流是事件冒泡。

1. 1. Capture

定義：

The event object propagate through the target‘s ancestors from the defaultView to the target‘s parent.
事件對象在事件目標的祖先中上到下順向傳播，從最頂層的defaultView到事件目標的（直系）父元素。

捕獲階段發生在整個流動的開始。在這階段裏事件會從父（主幹）到子（分支）由上往下傳播，被元素一層層的捕獲。

一般沒太大需要監聽捕獲階段的事件；如果確實希望這麽做，需要將addEventlistener的第三個參數設置為ture

// 第三個參數設置是否為捕獲階段，默認為false

element.addEventListener(‘click‘, function() {}, true)

1. 2. target

定義：

The event object arrive at the event object‘s event target.

事件對象到達事件目標。

addEventListener可以監聽目標階段的事件：

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

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

1. 3. bubble

定義：

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）

冒泡階段發生在最後，在這個階段事件會從子（分支）到父（主幹）逆向傳播，看起來像是一個水裏的泡泡往上冒

總結：若一個元素（div）是目標元素（button）的祖先，那事件對象會在該元素上觸發兩次：一次在捕獲階段，另一次實在冒泡階段，當事件對象在事件目標元素（button）上觸發是，事件流動進入了目標階段

even fluent