10th Week Blog 4 Event Flow
Event flow(事件流)
流：
流的概念，在現今的JavaScript中隨處可見。比如說React中的單向資料流，Node中的流，又或是今天本文所講的DOM事件流。都是流的一種生動體現。至於流的具體概念，我們採用下文的解釋：
用術語說流是對輸入輸出裝置的抽象。以程式的角度說，流是具有方向的資料
事件流之事件冒泡與事件捕獲：
在瀏覽器發展的過程中，開發團隊遇到了一個問題。那就是頁面中的哪一部分擁有特定的事件？
可以想象畫在一張紙上的一組同心圓，如果你把手指放在圓心上，那麼你的手指指向的其實不是一個圓，而是紙上所有的圓。放到實際頁面中就是，你點選一個按鈕，事實上你還同時點選了按鈕所有的父元素。
開發團隊的問題就在於，當點選按鈕時，是按鈕最外層的父元素先收到事件並執行，還是具體元素先收到事件並執行？所以這兒引入了事件流的概念。
事件流所描述的就是從頁面中接受事件的順序。
因為有兩種觀點，所以事件流也有兩種，分別是事件冒泡和事件捕獲。現行的主流是事件冒泡。
- 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)
- 2. target
定義：
The event object arrive at the event object's event target.
事件物件到達事件目標。
addEventListener可以監聽目標階段的事件：
element.addEventListener('click', function() {})
如果事件是不可冒泡的，那整個事件流動會到此為止，不會發生下面的冒泡階段
- 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）上觸發是，事件流動進入了目標階段
摘自 https://www.cnblogs.com/lizhidage/