理解DOM事件流的三個階段

流的概念，在現今的JavaScript中隨處可見。好比說React中的單向數據流，Node中的流，又或是今天本文所講的DOM事件流，都是流的一種生動體現。用術語說流是對輸入輸出設備的抽象。以程序的角度說，流是具備方向的數據。事件流所描述的就是從頁面中接受事件的順序。事件流也有兩種，分別是事件冒泡和事件捕獲。

 在全部的現代瀏覽器當中——除了IE9以前的版本——都實現了DOM2標準事件模型，即事件處理過程的三個階段：捕獲，目標，冒泡；

（1）捕獲階段：當咱們在 DOM 樹的某個節點發生了一些操做（例如單擊、鼠標移動上去），就會有一個事件發射過去。這個事件從 Window 發出，不斷通過下級節點直到觸發的目標節點。在到達目標節點以前的過程，就是捕獲階段（Capture Phase）。（全部通過的節點，都會觸發這個事件。捕獲階段的任務就是創建這個事件傳遞路線，以便後面冒泡階段順着這條路線返回 Window。）在目標元素對象自己上註冊的捕獲事件處理程序不會被調用。

（2）目標階段：當事件不斷的傳遞直到目標節點的時候，最終在目標節點上觸發這個事件，就是目標階段。

（3）冒泡階段：事件冒泡即事件開始時，由最具體的元素接收（也就是事件發生所在的節點），而後逐級傳播到較爲不具體的節點（咱們平時用的事件綁定就是利用的事件冒泡的原理）

事件冒泡即事件開始時，由最具體的元素接收（也就是事件發生所在的節點），而後逐級傳播到較爲不具體的節點。

事件捕獲的概念，與事件冒泡正好相反。它認爲當某個事件發生時，父元素應該更早接收到事件，具體元素則最後接收到事件

事件一開始從文檔的根節點流向目標對象（捕獲階段），而後在目標對向上被觸發（目標階段），以後再回溯到文檔的根節點（冒泡階段）。

事件冒泡過程，是能夠被阻止的。防止事件冒泡而帶來沒必要要的錯誤和困擾。

這個方法就是:stopPropagation()

stopPropagation() 方法：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程序將被調用，事件再也不被分派到其餘節點。