JavaScript 筆記：冒泡與捕捉

冒泡事件

冒泡事件的意思很簡單：當我們點擊一個子元素（像是最內層的 div），不只這個元素的事件會被觸發，連外層的父元素、祖父元素也會跟著執行各自的事件處理函式。舉例來說，假設 HTML 結構從外到內是 html、body、外層 div、中間層 div、內層 div，如果這三個 div 都加上 click 事件，當我們點擊最內層的 div，三個事件都會依序執行，並改變各自的背景顏色。

簡單來說，點擊內層 div 時，外層和中間層的事件也會自動被觸發，這就是「冒泡」：事件會從內層一路往外層傳遞。

我的 Codepen 範例

事件流程：捕捉與冒泡

當我們點擊 inner div 時，click 事件其實是從整個網頁（DOM 樹）的最上層開始，然後一路往下經過每一層父元素，最後才到 inner div。這個從外往內的過程叫做捕捉階段（Capturing Phase）。不過，因為 addEventListener() 預設只會在冒泡階段觸發事件（第三個參數是 false），所以在捕捉階段時，父元素的事件處理函式通常不會被執行。

等事件走到我們點擊的 inner div，這時會進入目標階段（Target Phase），這時會執行 inner div 上的事件處理函式。接著，事件會沿著原路從 inner div 再往外層回去，這段路叫做冒泡階段（Bubbling Phase），這時父元素的事件處理函式就會被依序執行。

控制捕捉或冒泡

• 設定 addEventListener() 第三個參數為 true → 僅捕捉階段觸發
• 預設 false → 僅冒泡階段觸發

如何阻止冒泡發生?

若不希望事件繼續往上傳遞，可在回呼中呼叫 event.stopPropagation()：

event.target 的特性

無論事件在哪個階段，event.target 永遠指向被點擊的實際元素：

事件委派 (Event Delegation)

因為事件有冒泡和捕捉的特性，我們可以只在共同的父元素上加一次 addEventListener()，不用每個子元素都加。當事件發生時，用 if 判斷是點到哪個元素，來決定要做什麼事，這樣可以讓程式更簡單。

參考資料

• Jonas's JavaScript Course