通俗易懂 了解js事件委托

当我们在编写JavaScript代码时，经常会遇到给多个元素添加相同类型事件处理程序的情况，比如点击事件。使用传统的方式，我们会逐个给每个元素添加事件处理程序，但这可能会导致代码冗余，尤其是当元素数量很多时。

为了解决这个问题，可以使用"事件委托"（也称为"事件代理"）。事件委托是一种将事件处理程序添加到一个共同的父元素上，而不是直接添加到每个子元素上的技术。

通俗来说，就好像你是一个老板（父元素），你需要指派一项任务（事件处理程序）给你的员工（子元素）。你不需要一个个去告诉每个员工做什么，而是把任务交给你的助手（父元素），助手会把任务分派给每个员工。

在JavaScript中，事件委托的原理类似。你给共同的父元素添加了事件处理程序，然后事件处理程序会根据具体触发事件的子元素来执行相应的任务。

例如，假设我们有一个<ul>元素，其中有很多<li>元素。我们想要给每个<li>元素添加点击事件。我们可以采用事件委托的方式，如下所示：

HTML：

<ul id="parent-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <!-- 更多的 <li> 元素 -->
</ul>

JavaScript：

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

// 添加点击事件处理程序
parentList.addEventListener('click', function(event) {
  // 确保点击的是 <li> 元素
  if (event.target.tagName === 'LI') {
    // 在这里执行点击事件的任务
    console.log('你点击了:', event.target.textContent);
  }
});

在上面的例子中，我们给父元素<ul>添加了点击事件处理程序。当任意一个子元素<li>被点击时，事件会冒泡到父元素，父元素的事件处理程序就会被触发。通过检查event.target.tagName来确认点击的是<li>元素，我们可以执行相应的任务。

事件委托的好处是，无论有多少个子元素，我们只需要一个事件处理程序就可以处理所有的点击事件。这样简化了代码，也减少了内存消耗，特别适用于动态生成的元素或者大量元素的情况。