如何使用addEventListener实现事件委托 - 问答

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

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

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

下面是一个简单的示例，演示了如何使用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>元素时，都会触发事件监听器，并将目标元素的文本颜色更改为红色。这样，我们只需要为父元素添加一个事件监听器，而不是为每个子元素单独添加事件监听器。

0 赞

0 踩