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

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

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

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

以下是一个简单的示例：

HTML 结构：

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

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);   } }); 

在这个示例中，我们为包含三个列表项的无序列表添加了事件委托。当点击任意一个列表项时，事件会冒泡至<ul>元素，然后在事件处理函数中通过检查event.target的标签名来确定是否点击了列表项。这样，即使后续动态添加新的列表项，事件处理依然有效。