溫馨提示×

JavaScript事件委托怎樣處理動態(tài)元素

小樊
81
2024-10-25 19:33:56
欄目: 編程語言

在 JavaScript 中，事件委托（Event delegation）是一種處理動態(tài)元素的高效方法。事件委托是將事件監(jiān)聽器添加到父元素上，而不是直接添加到目標元素上。當觸發(fā)子元素事件時，事件會冒泡至父元素，然后在父元素的事件監(jiān)聽器中處理。

以下是使用事件委托處理動態(tài)元素的步驟：

  1. 為父元素添加事件監(jiān)聽器。
  2. 在事件處理函數(shù)中，通過事件對象（event.target）獲取觸發(fā)事件的子元素。
  3. 對獲取到的子元素進行相應(yīng)的處理。

以下是一個簡單的示例：

HTML 結(jié)構(gòu)：

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

JavaScript 代碼：

// 獲取父元素
const list = document.getElementById('list');

// 為父元素添加事件監(jiān)聽器
list.addEventListener('click', function(event) {
  // 獲取觸發(fā)事件的子元素
  const target = event.target;

  // 檢查點擊的元素是否為 li 子元素
  if (target.tagName === 'LI') {
    console.log('Clicked on:', target.textContent);
  }
});

在這個示例中，我們?yōu)榘齻€列表項的無序列表添加了事件委托。當點擊任意一個列表項時，事件會冒泡至<ul>元素，然后在事件處理函數(shù)中通過檢查event.target的標簽名來確定是否點擊了列表項。這樣，即使后續(xù)動態(tài)添加新的列表項，事件處理依然有效。

0 踩