JavaScript事件委托怎样处理动态元素

在 JavaScript 中，事件委托（Event delegation）是一种处理动态元素的高效方法。事件委托是将事件监听器添加到父元素上，而不是直接添加到目标元素上。当触发子元素事件时，事件会冒泡至父元素，然后在父元素的事件监听器中处理。

以下是使用事件委托处理动态元素的步骤：

1. 为父元素添加事件监听器。
2. 在事件处理函数中，通过事件对象（event.target）获取触发事件的子元素。
3. 对获取到的子元素进行相应的处理。

以下是一个简单的示例：

HTML 结构：

  
Item 1
  
Item 2
  
Item 3

JavaScript 代码：

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

// 为父元素添加事件监听器
list.addEventListener('click', function(event) {
  // 获取触发事件的子元素
  const target = event.target;

  // 检查点击的元素是否为 li 子元素
  if (target.tagName === 'LI') {
    console.log('Clicked on:', target.textContent);
  }
});

在这个示例中，我们为包含三个列表项的无序列表添加了事件委托。当点击任意一个列表项时，事件会冒泡至

元素，然后在事件处理函数中通过检查event.target的标签名来确定是否点击了列表项。这样，即使后续动态添加新的列表项，事件处理依然有效。