JS中的事件委托是什么？如何實現？

事件委托是利用JS事件冒泡機制，將子元素的事件監聽委托給父元素處理。其核心原理是通過在父元素上綁定一個事件監聽器，統一管理所有子元素的事件觸發，從而減少監聽器數量，提升性能，尤其適用于動態內容或大量子元素的情況。例如：一個包含幾十個按鈕的列表，若每個按鈕都單獨綁定事件，會增加內存消耗，但通過將事件綁定到父容器（如

），可顯著優化資源使用。實現步驟包括：1. 找到父級元素并綁定事件；2. 在回調函數中通過Event.target獲取實際觸發事件的子元素；3. 根據目標元素的屬性判斷是否執行對應操作。以點擊列表項輸出內容為例，可通過判斷event.target.tagname是否為’li’來執行邏輯。適用場景包括：子元素眾多、需要動態加載內容、需統一管理多個同類元素等。注意事項有：避免調用stoppropagation阻止事件冒泡；正確識別嵌套結構中的真實目標元素，可通過closest()方法精準匹配；對不希望觸發事件的元素進行條件過濾。掌握事件委托能有效簡化代碼，提高交互開發效率。



事件委托，其實就是利用了JS中事件冒泡的機制，在父元素上統一處理子元素的事件。這樣做的好處是減少監聽器的數量，提高性能，尤其適合動態內容或者大量子元素的情況。

---

什么是事件委托？

簡單來說，就是把子元素的事件監聽“委托”給它的父元素來處理。當子元素觸發事件時，這個事件會冒泡到父元素，父元素再根據事件對象判斷具體是哪個子元素觸發的，從而執行相應的邏輯。

舉個常見的例子：一個列表里有幾十個按鈕，如果每個按鈕都綁定一個點擊事件，那內存開銷就比較大。但如果把這些點擊事件統一交給它們的父容器（比如

）來處理，就能節省很多資源。

---

事件委托怎么實現？

實現事件委托的關鍵點有兩個：

• 給父元素綁定事件
• 在事件處理函數中通過 event.target 判斷具體觸發事件的子元素

基本步驟如下：

1. 找到父級元素，并綁定事件監聽器
2. 在回調函數中使用 event.target 獲取實際被點擊的元素
3. 根據需要判斷目標元素的類型、類名或其他屬性，決定是否執行操作

例如，假設我們有一個無序列表：

<ul id="list">   <li>選項1</li>   <li>選項2</li>   <li>選項3</li> </ul>

我們可以用以下JS代碼實現點擊某一項時輸出對應內容：

document.getElementById('list').addEventListener('click', function(event) {   if (event.target.tagName === 'LI') {     console.log('你點擊的是：' + event.target.textContent);   } });

這樣不管后面怎么動態添加

<ul id="menu">   <li><span>首頁</span></li>   <li><span>關于</span></li> </ul>

if (event.target.tagName === 'LI') { ... }

let target = event.target; while (target && target.parentNode !== listElement) {   target = target.parentNode; } if (target.tagName === 'LI') { ... }

或者使用更現代的方式，比如 closest() 方法：

if (event.target.closest('li')) {   // 處理邏輯 }

基本上就這些。事件委托是個很實用的小技巧，不復雜但容易忽略細節，掌握之后寫起交互來會省事不少。