AI生成--事件委托

事件委托（Event delegation）是一种JavaScript编程模式，在此模式中，我们将事件处理程序添加到父元素而不是每个子元素上。这允许我们使用一种更有效的方式来处理事件。

具体来说，事件委托的过程如下：

1. 找到元素的共同祖先元素（比如document.body）。
2. 添加事件监听器到这个祖先元素上，监听在它子元素上触发的事件。
3. 事件冒泡将使得事件最终到达这个祖先元素，这时JavaScript代码就可以处理这个事件了。
4. 通过event.target属性获取到实际触发事件的元素，进而区分不同的行为。

事件委托的好处在于，它可以在添加事件处理程序的同时，避免给每个元素都绑定监听器，避免了重复代码，减少内存消耗。此外，事件委托也可以动态地添加和删除元素，而不必担心丢失事件监听器。

举个例子，当我们需要给一个列表中的每个项目添加点击事件时，通过事件委托，我们只需要在包含整个列表的元素上添加一个点击事件监听器，然后用 event.target 判断用户点击的是哪个项目，从而执行不同的操作。

<ul id="parent-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>



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

// 添加事件监听器
parentList.addEventListener('click', function(event) {
  // 确保点击的是子元素
  if (event.target.tagName === 'LI') {
    // 输出被点击的文本内容
    console.log('You clicked on: ', event.target.innerText);
  }
});

上述代码中，我们使用了事件委托技术来为父元素 parentList 添加事件监听器 click。这意味着我们只需要为父元素添加一个事件监听器，而不是为每个子元素分别添加一个。在事件处理函数中，我们使用 event.target 属性获取被点击的元素，然后检查其标签名称是否是 LI，以保证只有子元素被点击时才触发事件处理函数。最后，我们输出被点击的子元素的文本内容。

总的来说，事件委托是一个非常实用的技术，它使得JavaScript代码更加简洁、高效。