一丶 流 什麼是流？ 比如 react 中的單項數據流，Node.js 中的流，或者本文中的 DOM 事件流，都是流的具體體現。專業地講，流是程式輸入或輸出的一個連續的位元組序列；通俗地講，流是有方向的數據。 二丶 事件流 什麼是事件流？ 假想一下，現在有一組同心圓，你把手指在最裡面的圓心上，與此同時 ...
一丶 流
什麼是流？
比如 react 中的單項數據流，Node.js 中的流，或者本文中的 DOM 事件流，都是流的具體體現。專業地講，流是程式輸入或輸出的一個連續的位元組序列；通俗地講，流是有方向的數據。
二丶 事件流
什麼是事件流？
假想一下，現在有一組同心圓，你把手指在最裡面的圓心上，與此同時，你也正在指著外層的其他同心圓。假設最裡面的圓是 DOM 中的一個按鈕，那就是說，你點擊按鈕這個元素的同時，也點擊了他的所有父級元素。那麼這個點擊事件 DOM 要怎麼處理呢？事實上，這個點擊事件並非只是簡單地在被點擊的元素上發生一次。那麼點擊事件是誰先得到通知並響應呢？
事件捕獲
事件捕獲就是指被點擊元素的父級元素應該先接收到事件，並向下傳播，就像例子中的按鈕點擊事件，接收到事件的元素順序應該為 window > document > body > button.
事件冒泡
事件冒泡跟事件捕獲好順序相反，認為應該是被點擊的具體元素先接受到事件：button > body > document > window.
事件階段
當一個 DOM 事件發生時，要經歷三個階段：
1. 從文檔的根節點流向目標對象 ---> 捕獲階段；
2. 在目標對象上被觸發 ---> 目標階段；
3. 回溯到文檔的根節點 ---> 冒泡階段。
三丶 卵用
通過事件監聽（addEventListener(type,callback,true)）在父級元素捕獲事件，可以阻止事件冒泡（stopPropagation()）引起的問題。
四丶總結
事件流描述的就是事件發生的順序。
事件捕獲：所謂捕獲，就像是進行一場狩獵一樣，以獵人（不是獵頭）的角度來看，已經將獵物（發生事件的元素）活動範圍(window)確定了，在外面層層包圍，然後縮小包圍圈，一層一層由外向內的，直至擒獲獵物，即傳播到事件發生的具體元素。
目標階段：以獵物本身的角度講，比如是一頭獅子（不是攻城獅），剛開始只是被獵人們包圍，但獵人並不確定自己的具體位置，直到獵人的包圍圈足夠小，才發現自己。這時候自己就真正成為了他們的目標。
冒泡階段：還是以獅子角度講，以獅子的性格，即使是困獸猶鬥，也不會坐以待斃的，所以它選擇突圍（冒泡）。然而外面的獵人（父級元素）有很多，它要一層層地突破，直至逃離了狩獵場（window），才有資格嘲笑愚蠢的人類 0.0 。
阻止事件冒泡：然而對獅子而言，結局並不總是那麼美好的，因為自嘲愚蠢的家伙 一般都很精明~ 在以上每個階段進行的過程中，獅子都可能掛掉，假如這是一群裝備精良的盜獵者，他們採用了一些空中偵察技術，併在縮小包圍圈（事件捕獲階段）的過程中發現了獅子的蹤跡，並用激光制導扯彈麻醉了獅子，那麼他們大可以提前打卡下班看小學生打第四節比賽了。這樣也就不會出現獅子突圍的（冒泡階段）經典劇情了。也就避免了獅子突圍可能造成的傷亡~
就寫這麼多吧，沒有
