[DOM] 事件的傳遞機制：Bubbling & Capturing

來源：https://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture

事件流程有兩種方向的傳遞：

• 事件捕獲 (event capturing) — 由上而下傳遞至啟動事件的節點 (event.target)
• 事件冒泡 (event bubbling) — 從啟動事件的節點 (event.target) 開始，由下而上傳遞至根節點 document

如何開啟事件補獲？

事件捕獲 (event capturing) 預設為關閉。

若我們想開啟這個功能，可運用第三個參數 useCapture ：

element.addEventListener(“click”, handler, useCapture)

useCapture的預設值為 false，給 true 就能開啟事件捕獲 (event capturing)功能：

element.addEventListener(“click”, handler, true)

如何阻止事件的傳播？

而事件冒泡 (event bubbling)預設為開啟。

在事件的 handler 中加入 Event.stopPropagation()，事件就會停在啟動事件的節點 (event.target)，阻止事件由下而上傳遞。