事件代理

问题

什么是事件代理（Event Delegation）？

解答

事件代理也称为事件委托，是把原本需要绑定在子元素的事件委托给父元素，让父元素负责监听和处理。

原理

事件代理基于 DOM 事件冒泡机制。事件触发后会在元素间传播，分为三个阶段：

1. 捕获阶段：从 window 对象传导到目标节点，不响应事件
2. 目标阶段：在目标节点上触发
3. 冒泡阶段：从目标节点传导回 window 对象，事件代理利用这个阶段

示例

比如在 ul 上代理所有 li 的点击事件：

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

const list = document.getElementById('list');

list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了：', e.target.textContent);
  }
});

优点

节省内存：不需要给每个 li 都绑定事件，只在父元素 ul 上绑定一次，大幅减少事件注册数量。

动态绑定：通过 AJAX 或用户操作动态增删 li 元素时，无需重新绑定或解绑事件。事件绑定在父元素上，执行时再匹配目标元素即可。

注意事项

不要盲目将事件委托给最顶层元素。事件冒泡需要耗时，DOM 嵌套越深，“事件传播链”越长，性能损耗越大。应选择合适的父元素进行委托。

关键点

• 基于事件冒泡机制，将子元素事件绑定到父元素上
• 减少内存占用，避免为每个子元素单独绑定事件
• 支持动态元素，新增或删除子元素无需重新绑定
• 选择合适的父元素，避免事件传播链过长影响性能