JavaScript事件委托怎樣提升效率

事件委托（Event delegation）是一種提高效率的 JavaScript 編程技巧，主要用于減少事件監聽器的數量，從而優化性能。這種方法的核心思想是利用事件冒泡機制，將事件監聽器添加到父元素上，而不是為每個子元素單獨添加事件監聽器。當事件觸發時，會一直沿著 DOM 結構向上冒泡，直到找到一個匹配的事件監聽器為止。

事件委托的優點：

1. 減少內存占用：通過將事件監聽器添加到父元素上，可以減少瀏覽器需要維護的事件監聽器數量，從而降低內存占用。
2. 提高性能：由于事件監聽器的數量減少，頁面加載和運行時的性能得到了提升。
3. 動態元素支持：對于動態添加的元素，事件委托依然有效，因為事件監聽器是在父元素上添加的，動態添加的子元素也能觸發事件。

事件委托的基本原理：

1. 為父元素添加一個事件監聽器。
2. 在事件處理函數中，通過事件對象的 target 屬性判斷觸發事件的元素是否是我們關心的元素（即需要執行特定操作的元素）。
3. 如果觸發事件的元素是我們關心的元素，那么執行相應的操作；否則，不執行任何操作。

下面是一個簡單的示例：

HTML 結構：

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

JavaScript 代碼：

// 為父元素（ul）添加事件監聽器
document.getElementById('list').addEventListener('click', function(event) {
  // 獲取觸發事件的元素（li）
  const target = event.target;

  // 判斷觸發事件的元素是否是我們關心的元素（li）
  if (target.tagName === 'LI') {
    console.log('Clicked on:', target.textContent);
  }
});

在這個示例中，我們將點擊事件監聽器添加到了父元素（ul）上，而不是為每個子元素（li）單獨添加事件監聽器。當點擊某個子元素時，事件會沿著 DOM 結構向上冒泡，觸發父元素上的事件處理函數。在事件處理函數中，我們通過判斷觸發事件的元素（target）是否是我們關心的元素（li），來決定是否執行相應的操作。