# 【Describe event bubbling】 ## 一、名詞定義、概念 ### 事件捕獲 Event Capturing: 從外層節點到內層。 通俗的理解就是，當鼠標點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式注冊了對應的事件的話，會先觸發父元素綁定的事件。 <br> ### 事件冒泡 Event Bubbling: 從內層節點到外層。 當一個元素被觸發時，在它身上事件處理器（event handler）會先執行，接著是它的父層元素，然後是所有其它的上層元素也都會被觸發。與事件捕獲相反。 冒泡事件會從被觸發該事件的 target element 一直上外傳遞，基本上會一直到 <html> 然後到 document 物件，有些事件甚至會到 window。 <br> ### 事件委派 Event Delegation: Event Delegation（事件委派）是一種受惠於 Event Bubbling 而能減少監聽器數目的方法。 [HackMD](https://hackmd.io/MDpuGgcXQwSywxS6ZO4j9g) <br> ### 事件流(event flow): **1. 定義:** Event flow is the process through which the an event originates from the DOM implementation and is passed into the Document Object Model. ([W3C](https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture)) ### 找到觸發事件的DOM物件的機制(Capture & bubble) **2. 關鍵流程:** 事件傳遞階段: 【Capture Phase】 -> 【Target Phase】 -> 【Bubble Phase】 ![](https://i.imgur.com/tW3aHXN.png) <br> <br> ## 二、機制運作方式 ## 觀察DOM物件同時被觸發的結果 ### Event.target: 指向最初觸發事件的 DOM 物件。event.target 屬性則是永遠指向觸發事件的 DOM 物件。 **【大補帖】** 與 event.currentTarget 屬性不同的是，event.currentTarget 屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件。 ![](https://i.imgur.com/3DdGIuv.png) [直接來看看程式運作](https://codepen.io/elsa2700/pen/WNjJoZj) ## 三、常見案例應用 ### 取消事件冒泡 stopPropagation 加在哪邊，事件的傳遞就斷在哪裡，不會繼續往下傳遞。 ```$ onMouseDown = (e) => e.stopPropagation(); ``` [Codepen範例](https://codepen.io/CrocoDillon/pen/MpMoZe) <br> ### 常被搞混的案例：取消預設行為 preventDefault 取消瀏覽器的預設行為，最常見的做法就是阻止超連結，跟 JavaScript 的事件傳遞「一點關係都沒有」。事件還是會繼續傳遞。 [Codepen範例](https://codepen.io/sushantb/pen/PKZgxw) <br> <br> ### 四、參考來源: DOM 的事件傳遞機制：捕獲與冒泡 https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/ 瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation https://shubo.io/event-bubbling-event-capturing-event-delegation/ Event Capturing and Bubbling https://pjchender.dev/webapis/note-event-capturing-bubbling/ JavaScript 详说事件机制之冒泡、捕获、传播、委托 https://www.cnblogs.com/bfgis/p/5460191.html Event Delegation 事件委派 https://cythilya.github.io/2015/07/08/javascript-event-delegation/