前端三十｜07. [JS] 瀏覽器 DOM 元素的事件代理是指什麼？

本系列來到了 JavaScript 相關的主題，預計會在這逐步前進好一陣子，讓我們從較簡單的主題開始吧；今天就先來聊聊瀏覽器中的事件代理是怎麼一回事。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

事件

在網頁中，如果想與使用者進行「互動」，勢必需要透過一些方法捕捉使用者做了什麼。當然，瀏覽器開發者們早已依據 W3C 的事件規範，幫我們實作好了底層的邏輯，我們只需要透過 Web API 中的 DOM Event，針對想監聽的 DOM 元素 & 事件，註冊事件監聽器（Event Listener）便可以輕鬆掌握使用者在網頁上的一舉一動。

事件監聽

前面剛提到了「事件監聽器」，開發者可以在想要監聽事件的 DOM 元素上，透過 addEventListener 註冊監聽器。例如：

document.querySelector('#id').addEventListener('click', clickHandler)

當使用者對 #id 元素點擊時，便會觸發 clickHandler，並會傳入一個事件物件，內容包含事件傳遞過程中的紀錄，例如目標元素、當前元素、傳遞階段等等。開發者便可以從中取得所需要的資料，並對資料做你想做的事情。

一個現代網站有大量的使用者互動是稀鬆平常的事情，若是透過事件監聽一個一個寫，那豈不是到處都要註冊事件監聽？除了效能很差，寫起來也很麻煩；這也就是「事件代理」的重要性了！

不過在聊到事件代理之前，我們需要先理解 DOM Tree 上的事件傳遞機制是如何運作的。

事件傳遞

可以參考這張 W3C 所定義的 Event Flow 圖：

規範中定義了事件傳遞的三個階段：

• 捕獲階段：由 DOM Tree 的根節點依序向內傳遞，過程中觸發各別元素的捕獲階段事件監聽。
• 目標階段：到達事件目標（Event…