前端面試題（四）—— 事件委託（Event Delegation）

一、什麼是事件委託

事件委託（Event Delegation）是一種常用的技術。

它利用事件冒泡的特性，在父元素上監聽事件，而不是在子元素上直接添加事件監聽器。

通過在父元素上捕獲事件，然後根據事件的目標（target）來執行相應的操作，從而實現對子元素的事件處理。

二、實現方式

通過給父元素添加事件監聽器，然後在事件處理函數中判斷事件的目標元素是否是我們所關心的子元素，如果是，則執行相應的操作，如果不是，則忽略。

例子

有一個列表，點擊每個列表項的時候，打印列表項的文本內容，代碼如下：

html

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

js

// 獲取父元素（有序列表）
  const list = document.getElementById('list');

  // 添加事件監聽器到父元素上
  list.addEventListener('click', function (event) {
    // 檢查事件目標是否是列表項（li元素）
    if (event.target.tagName === 'LI') {
      // 在控制檯中顯示列表項的文本內容
      console.log(event.target.textContent);
    }
  });

在這個例子中，事件監聽器在父元素 <ul> 上，而不是每個 <li> 上，點擊 <li> 時，事件會冒泡到父元素。

這樣無論有多少 <li>，我們只需要在父元素添加一個事件監聽器，就可以處理所有列表項的點擊事件，從而減少了重複的代碼，提高了代碼的可維護性和性能。

三、優勢

1、減少內存消耗

通過將事件監聽器綁定到父元素上，而不是給每個子元素都添加監聽器，可以減少內存消耗，特別是當頁面中有大量子元素時。

2、動態元素的處理

對於動態添加的子元素，如果使用事件委託，不需要額外的操作來添加事件監聽器，因爲事件處理器是綁定在父元素上的，對於新添加的子元素也同樣有效。

3、簡化代碼結構

使用事件委託可以減少重複的代碼，特別是當多個子元素需要相同的事件處理邏輯時，只需在父元素上添加一個事件監聽器即可。

4、提高性能

減少了事件處理器的數量，可以提高頁面的性能，特別是在處理大量元素時。