7. 什么是事件委托

总结

• 事件委托 是利用 事件冒泡机制，将事件监听器绑定在父元素上，通过 event.target 判断实际触发事件的子元素。
• 它可以显著减少事件监听器数量，提升性能，尤其适用于动态内容和大量子元素。
• 事件委托是现代前端开发中常用的优化手段之一，建议在列表、表格、菜单等场景中优先使用。

✅ 建议：合理使用事件委托，避免直接绑定过多事件监听器，提升页面性能和可维护性。

概述

事件委托 是一种利用 事件冒泡机制 的前端优化技巧。它的核心思想是：将事件监听器绑定在父元素上，而不是每个子元素单独绑定，然后通过 event.target 来判断具体触发事件的子元素。

这种方式可以显著减少内存占用和提升性能，尤其适用于动态内容或大量子元素的场景。

一、事件委托的原理

1. 事件冒泡机制回顾

当某个子元素触发事件时，该事件会沿着 DOM 树向上冒泡，直到根节点。父元素可以通过监听冒泡阶段的事件来统一处理子元素的事件。

2. event.target 与 event.currentTarget

• event.target：实际触发事件的元素（可能是子元素）。
• event.currentTarget：绑定事件监听器的元素（通常是父元素）。

二、实现事件委托

示例：为多个 <li> 绑定点击事件

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

document.getElementById("menu").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    console.log("你点击了：", e.target.textContent);
  }
});

说明：

• 只为 <ul> 添加一个事件监听器；
• 通过 e.target 判断具体点击的是哪个 <li>；
• 无需为每个 <li> 单独绑定事件。

三、事件委托的优点

四、适用场景

五、注意事项

六、与传统事件绑定的对比