如何使用addEventListener实现事件委托

事件委托是一种高效处理事件的方式，它允许将事件监听器添加到父元素上，而不是为每个子元素单独添加事件监听器。当事件触发时，事件会冒泡到父元素，然后在父元素的事件监听器中处理。这种方式可以减少内存使用，并提高性能。

要使用addEventListener实现事件委托，请遵循以下步骤：

1. 为父元素添加一个事件监听器（例如click事件）。
2. 在事件监听器的回调函数中，检查事件的目标元素（event.target）是否是你想要触发事件的子元素。你可以通过检查元素的类名、ID或其他属性来判断。
3. 如果目标元素满足条件，那么在该元素上执行你想要的操作。

下面是一个简单的示例，演示了如何使用addEventListener实现事件委托：

HTML:

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

JavaScript:

// 获取父元素（列表） const list = document.getElementById('list');  // 为父元素添加点击事件监听器 list.addEventListener('click', (event) => {   // 检查目标元素是否具有类名 "item"   if (event.target.classList.contains('item')) {     // 在这里执行你想要的操作，例如更改目标元素的样式     event.target.style.color = 'red';   } }); 

在这个示例中，我们将点击事件监听器添加到了<ul>元素上。当点击列表中的任何一个<li>元素时，都会触发事件监听器，并将目标元素的文本颜色更改为红色。这样，我们只需要为父元素添加一个事件监听器，而不是为每个子元素单独添加事件监听器。