delegate 用法详解

什么是 delegate（事件委托）？

在 JavaScript 中，delegate（事件委托）是一种利用事件冒泡机制，将多个子元素的事件监听器委托给其父元素统一处理的技术。 它特别适用于动态添加或删除的元素，避免为每个新元素重复绑定事件处理器。

为什么使用事件委托？

• ✅ 性能优化：减少事件监听器数量，降低内存占用。
• ✅ 动态元素支持：无需为后续添加的元素重新绑定事件。
• ✅ 代码简洁：逻辑集中，易于维护。

基础示例

以下是一个使用事件委托处理列表点击的简单例子：

// HTML

<ul id="list">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>



// JavaScript

document.getElementById('list').addEventListener('click', function(e) {

  if (e.target.tagName === 'LI') {

    alert('你点击了：' + e.target.textContent);

  }

});

交互演示

最佳实践建议

1. 始终检查 e.target 的类型或类名，确保只响应目标元素。
2. 避免在委托层级过深的祖先节点上绑定事件，以免影响性能。
3. 结合 data-* 属性传递额外信息，提高灵活性。