JavaScript 事件委派（Event Delegation）入門指南：給新手的介紹

By徐培鈞
LinkedIn

更新日期： 2025 年 3 月 9 日

本文為 DOM 事件 系列文，第 4 篇：

  1. JavaScript DOM 事件物件 e 屬性介紹：新手指南
  2. JavaScript 事件監聽器的入門指南：新手必讀
  3. 初學者指南：JavaScript 中的事件階段（Event Capture, Propagation and Bubbling）
  4. JavaScript 事件委派（Event Delegation）入門指南：給新手的介紹　👈進度
  5. JavaScript 事件處理：e.preventDefault() 的新手指南
  6. 初學者指南：JavaScript 中的 e.stopPropagation()
  7. JavaScript 中 on 系列與 addEventListener 的差別：新手必讀指南

在 JavaScript 中，事件處理是一個重要的功能，它讓我們可以對用戶的操作進行響應。

當網頁中存在大量的互動元素時，我們往往需要對每個元素綁定事件監聽器。

然而，這種做法可能會降低性能，特別是當我們處理動態生成的元素時。

這時，事件委派（Event Delegation）提供了一種更加高效且簡潔的解決方案。

本文將介紹什麼是事件委派、如何實現它，並展示其應用場景。

事件冒泡機制

要理解事件委派，首先需要了解事件冒泡（Event Bubbling）。

在 DOM 中，當一個元素觸發事件時，該事件會從最深層的元素開始（例如一個按鈕），逐層冒泡到它的父元素，直到 document 節點。這就是所謂的事件冒泡。

我們可以利用這個機制，在父級元素上監聽事件，然後根據實際觸發事件的目標元素來做出響應。

graph TD
    subgraph DOM層級結構
    document["document 文件"]
    html["html 元素"]
    body["body 元素"]
    div["div 元素"]
    button["button 按鈕元素"]
    end
    
    button --> div
    div --> body
    body --> html
    html --> document
    
    subgraph 事件冒泡流程
    step1["1. 用戶點擊按鈕"]
    step2["2. 按鈕元素處理事件"]
    step3["3. 事件冒泡到div元素"]
    step4["4. 事件冒泡到body元素"]
    step5["5. 事件冒泡到html元素"]
    step6["6. 事件冒泡到document元素"]
    end
    
    step1 --> step2 --> step3 --> step4 --> step5 --> step6
    
    subgraph 事件處理
    handler1["按鈕元素的事件處理器執行"]
    handler2["div元素的事件處理器執行"]
    handler3["body元素的事件處理器執行"]
    handler4["html元素的事件處理器執行"]
    handler5["document元素的事件處理器執行"]
    end
    
    step2 -.-> handler1
    step3 -.-> handler2
    step4 -.-> handler3
    step5 -.-> handler4
    step6 -.-> handler5
    
    classDef active fill:#f96,stroke:#333,stroke-width:2px;
    class button,step1,step2 active;

上圖展示了事件冒泡（Event Bubbling）的完整過程：

  1. DOM層級結構：
    • 最底層是按鈕元素
    • 從按鈕開始，逐層向上到 div、body、html，最後到 document
  2. 事件冒泡流程：
    • 起始於用戶點擊按鈕
    • 事件首先在按鈕元素本身被處理
    • 然後事件逐層向上冒泡，經過每一層 DOM 元素
  3. 事件處理：
    • 在冒泡過程中，每個層級的事件處理器都會被觸發
    • 先執行最深層元素的處理器，最後執行最外層元素的處理器

事件冒泡是前端開發中的重要概念，它使我們能夠在較高層級的元素上捕獲和處理來自子元素的事件。

這種機制為事件委派（Event Delegation）提供了基礎，讓我們能夠更有效率地管理頁面上的事件監聽。

什麼是事件委派？

事件委派是一種將事件處理程序，委派到父級元素的技術。

與其對多個子元素分別添加事件監聽器，不如在父級元素上添加一個事件監聽器，然後通過事件冒泡來捕捉子元素的事件。

這樣，我們只需一次綁定事件監聽器，就能處理多個子元素的事件。

這種方法不僅可以減少代碼的冗餘，還可以有效提高性能，特別是在動態生成的元素上，因為無需為每個新生成的元素單獨添加監聽器。

graph TD
    A[父元素 ul] --> B[子元素1 li]
    A --> C[子元素2 li]
    A --> D[子元素3 li]
    
    E[步驟1: 在父元素ul上設置事件監聽器] --> F[步驟2: 用戶點擊任一子元素li]
    F --> G[步驟3: 事件冒泡到父元素ul]
    G --> H[步驟4: 檢查event.target確定哪個li被點擊]
    H --> I[步驟5: 執行對應的處理邏輯]

事件委派的實現

假設我們有一個動態生成的列表，每個列表項都有一個點擊事件，傳統的做法是給每個列表項單獨添加事件監聽器。

但是，使用事件委派後，我們只需要在列表的父級元素上綁定一次事件監聽器，來處理所有子元素的點擊事件。

傳統的事件綁定方式

<ul id="myList">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

<script>
  const items = document.querySelectorAll('#myList li');
  items.forEach(item => {
    item.addEventListener('click', function() {
      console.log('點擊了：' + this.textContent);
    });
  });
</script>

在這裡，我們為每個 <li> 元素都單獨綁定了一個事件監聽器。

這在元素數量較少時是可行的，但如果列表項目數量巨大或項目是動態生成的，這樣做就會導致性能問題。

使用事件委派

下面的例子展示了如何使用事件委派來代替為每個子元素單獨綁定事件。

<ul id="myList">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

<script>
  const list = document.getElementById('myList');

  list.addEventListener('click', function(e) {
    // 確保點擊的目標是 <li> 元素
    if (e.target.tagName === 'LI') {
      console.log('點擊了：' + e.target.textContent);
    }
  });
</script>

在這個範例中，我們只需要在 <ul> 元素上綁定一次 click 事件監聽器。

當點擊某個子元素時，事件會冒泡到父元素 <ul>，我們可以通過 e.target 來確定具體是哪個 <li> 被點擊了。

這樣，我們不僅減少了事件綁定的次數，還可以處理動態生成的 <li> 項目，因為父元素的監聽器可以捕捉任何冒泡上來的事件。

事件委派的優點

  1. 提升性能：如果我們為每個元素都單獨綁定事件監聽器，當元素數量很大時，這將占用大量內存和資源。事件委派只需在父元素上綁定一個監聽器，能顯著減少事件處理器的數量。
  2. 簡化代碼：不需要為每個子元素單獨寫事件綁定邏輯，代碼變得更簡潔明了。
  3. 動態元素支持：事件委派特別適合處理動態生成的元素。我們不需要在元素生成後再手動添加事件監聽器，父級的事件監聽器會自動捕捉新元素的事件。

事件委派的應用場景

  1. 動態生成的元素：當我們通過 JavaScript 動態生成元素時，如果已經有事件委派機制，那麼這些新元素會自動繼承父元素的事件處理，無需手動綁定。
  2. 大量元素的事件處理：例如一個大型的表格，或者一個長列表，使用事件委派可以減少內存佔用，避免為每一行或每一個元素綁定單獨的監聽器。
  3. 統一事件處理邏輯：當多個子元素需要相同的事件處理邏輯時，使用事件委派可以將邏輯統一到一個地方，便於維護。

綜合範例：點擊動態列表項目

以下是一個更完整的範例，展示了如何使用事件委派處理動態生成的列表項目。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件委派示範</title>
</head>
<body>
  <ul id="myList">
    <li>項目 1</li>
    <li>項目 2</li>
  </ul>
  <button id="addItemBtn">新增項目</button>

  <script>
    const list = document.getElementById('myList');
    const addItemBtn = document.getElementById('addItemBtn');

    // 父元素使用事件委派
    list.addEventListener('click', function(e) {
      if (e.target.tagName === 'LI') {
        console.log('點擊了：' + e.target.textContent);
      }
    });

    // 動態添加新項目
    addItemBtn.addEventListener('click', function() {
      const newItem = document.createElement('li');
      newItem.textContent = '新增項目';
      list.appendChild(newItem);
    });
  </script>
</body>
</html>

在這個範例中，我們可以動態添加新的 <li> 項目，並且無需為每個新項目單獨添加事件監聽器。所有的點擊事件都通過父級 <ul> 元素的事件監聽器來捕捉和處理，這正是事件委派的強大之處。

結論

事件委派（Event Delegation）是一個高效的事件處理技術，它可以減少事件監聽器的數量，提升性能，並且讓代碼更加簡潔、可維護。

無論是在處理大量靜態元素，還是動態生成的元素，事件委派都是一個非常有用的技術。

希望這篇文章能幫助你，理解事件委派的基本概念和應用，讓你能夠更靈活地處理 JavaScript 中的事件！

Similar Posts

JavaScript 動態載入模組｜運行邏輯指南（附流程圖）

By徐培鈞

動態載入是 JavaScript 中一種高效的設計模式，它允許你根據需求按需加載模組。

在多功能、多頁面的應用中，動態載入可以顯著減少初始頁面加載時間並提升性能。

本篇文章以一段範例代碼為例，逐步講解其運行邏輯和動態載入的優勢，幫助新手快速掌握這項技術。

初學者指南：Node.js 和瀏覽器中常見函數的使用差異

By徐培鈞

JavaScript 是一種既能在瀏覽器中運行，也能在後端使用的語言。

Node.js 是一個用於在後端運行 JavaScript 的開源運行環境，而瀏覽器則是 JavaScript 最早應用的前端環境。

這兩者都可以執行 JavaScript，但在常見函數和 API 的使用上存在一些差異。

在這篇文章中，我們將介紹 Node.js 和瀏覽器中的一些常見函數的差異，幫助新手更好地理解兩者的特性和不同之處。

如何設定 javascript 的 setInterval 停止時機

By徐培鈞

在 JavaScript 中，setInterval 是一個常用的非同步函數，用來在指定的時間間隔中執行一段程式碼。

儘管它功能強大，但開發者在使用 setInterval 時經常會遇到一些常見的錯誤，導致程式無法按預期運行。

本文將介紹一個常見的錯誤範例，並解釋其原因和正確的寫法。

Corepack 是什麼？完整解析與常見問題解決方案

By徐培鈞

對於剛開始接觸 JavaScript 或 Node.js 的開發者來說，Corepack 可能是一個不太熟悉的工具。

許多人在安裝或使用 Node.js 時，可能會遇到與 Corepack 相關的錯誤或疑問。

本文將詳細介紹 Corepack 的用途、它的優勢，以及一些常見問題的可能原因與解決方案，幫助初學者更順利地使用它。