事件委托利用事件冒泡将监听器绑定到父元素，通过判断event.target处理子元素事件，减少内存开销并支持动态元素。例如为待办列表的删除按钮统一绑定事件，无需单独监听每个按钮，新增项自动生效。适用于列表、表格等频繁增删的场景，但需避免用于不冒泡的事件如focus、blur，推荐用data属性或类名精确过滤目标，注意解绑时需在逻辑中控制响应。掌握该技术可提升动态界面性能与维护性。
JavaScript事件委托是一种利用事件冒泡机制，将事件监听器绑定到父元素而非每个子元素上的编程技巧。它不仅能减少内存占用，还能自动处理动态添加的元素，是实现动态绑定的最佳实践之一。
事件委托的核心原理
当用户触发一个DOM事件（如点击），该事件会经历三个阶段：捕获、目标、冒顶。大多数情况下我们使用的是冒泡阶段——事件从触发元素逐层向上传递到根节点。
事件委托正是基于这一冒泡特性：把事件监听器挂在父级元素上，通过检查事件对象的 event.target 来判断实际触发源，从而做出相应处理。
- 不需要为每个子元素单独绑定事件
- 父元素可以监听未来才加入的子元素
- 大幅降低重复绑定带来的性能开销
如何正确实现事件委托
关键在于选择合适的父容器，并在回调中准确识别目标元素。常见做法是通过属性（如 class、data-*）标记可交互元素。
例如，一个待办事项列表：
<ul id="todo-list"> <li><span class="delete-btn">删除</span>Item 1</li> <li><span class="delete-btn">删除</span>Item 2</li> </ul>
无需为每个“删除”按钮绑定事件，只需监听整个列表：
document.getElementById('todo-list').addEventListener('click', function(e) {
if (e.target && e.target.classList.contains('delete-btn')) {
const item = e.target.parentElement;
item.remove();
}
});
这样即使后续通过JS新增了更多项，删除功能依然有效。
适用场景与注意事项
事件委托特别适合用于列表、表格、菜单等包含大量子项或频繁增删的结构。
- 避免过度委托：不是所有事件都适合，比如 focus、blur 不冒泡（可用 focusin/focusout 替代）
- 注意事件过滤逻辑，防止误触发，推荐使用 data 属性或特定类名做标识
- 解绑问题：无法直接“解绑”某个子元素的行为，需在逻辑中控制是否响应
- 性能权衡：对于少量静态元素，直接绑定更直观清晰
