事件冒泡和事件委託的概念及作用

JS事件冒泡與事件委託是什麼，需要具體代碼範例

事件冒泡（Event Bubbling）和事件委託（Event Delegation）是JS中兩種與事件處理相關的重要概念。本文將詳細介紹這兩種概念，並提供具體的程式碼範例來解釋它們的用法和實作原理。

一、事件冒泡（Event Bubbling）

事件冒泡是指當一個元素上發生某個事件（如點擊事件），如果該元素定義了事件處理程序，該事件將會先被觸發，然後事件將從目前元素開始一級一級向父元素傳播，直到傳播到文件的根元素為止。

事件冒泡機制使得我們可以方便地為一個父元素的多個子元素添加相同的事件處理程序，而無需為每個子元素單獨定義事件處理程序。這樣可以簡化程式碼，並提高程式碼的維護性。

下面是一個事件冒泡的程式碼範例：

HTML程式碼：

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

JS程式碼：

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

在上面的程式碼中，當我們點選子元素1或子元素2時，控制台會依序輸出：

触发子元素1的点击事件
触发父元素的点击事件

只有當事件冒泡到父元素時，父元素的事件處理程序才會被觸發。透過呼叫event.stopPropagation()來阻止事件繼續冒泡。

二、事件委託（Event Delegation）

事件委託是指將事件的處理程序綁定到父元素上，透過判斷事件的原始目標（event.target）來決定是否執行對應的操作。

事件委託的好處在於，當有新的子元素被添加到父元素中時，不需要再為新的子元素單獨綁定事件處理程序，而是直接透過父元素來處理事件。這樣可以大幅減少事件處理程序的數量，並提高效能。

下面是一個事件委託的程式碼範例：

HTML程式碼：

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

JS程式碼：

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

在上面的程式碼中，當我們點擊任何一個li元素時，控制台會輸出被點選的項目的文字內容。無論後續增加了多少個li元素，它們的點擊事件都會被父元素處理。

事件委託的原則是透過事件冒泡來實現的。事件首先冒泡到父元素，然後根據事件的原始目標進行判斷，從而確定是否需要執行相應的操作。

總結：

事件冒泡與事件委託是JS中與事件處理相關的重要概念。事件冒泡使得我們可以方便地為父元素的多個子元素添加相同的事件處理程序，提高代碼的複用性；事件委託則通過將事件的處理程序綁定到父元素上，根據事件的原始目標來決定是否執行相應的操作，提高效能並減少程式碼量。在實際開發中，根據需求合理使用事件冒泡和事件委託，可以編寫出優雅且有效率的程式碼。

以上是事件冒泡和事件委託的概念及作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！