事件委托通过将监听器绑定在父元素上利用冒泡机制处理子元素事件，减少内存占用并支持动态内容；核心是用event.target配合matches()或closest()识别目标元素，需注意事件冒泡限制与性能优化。
事件委托利用事件冒泡机制，把事件监听器绑定在父元素上，而不是每个子元素单独绑定。这样既减少内存占用，又让动态添加的子元素自动响应事件，性能和可维护性都更好。
事件委托的核心原理
DOM事件会从触发目标逐级向上冒泡到根节点。只要父元素监听了事件，就能捕获子元素冒泡上来的事件，并通过 event.target 准确识别真正被点击的是哪个子元素。
比如一个列表有100个 ，不委托就得绑定100次 click；用委托只需绑定1次到 event.target 是否为 即可。
基础实现方式
用 addEventListener 绑定在父容器，再用条件判断筛选目标元素：
- 获取事件对象的 event.target，它是实际触发事件的最深子元素
- 用 matches() 或 closest() 判断它是否符合目标选择器（如
"li"、".btn-delete"） - 符合条件才执行业务逻辑，避免误触发
示例：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.matches('li')) {
console.log('点击了列表项：', e.target.textContent);
}
});
处理动态内容与复杂结构
新增的子元素无需重新绑定事件——只要它们结构符合委托规则，就能立即响应。
对嵌套较深或存在中间包装元素的
情况，推荐用 closest() 向上查找最近匹配的祖先元素：
-
e.target.closest('.item')能命中.item本身，也能命中它内部任意子节点（如按钮、文字） - 比反复判断
parentNode更简洁可靠 - 适合按钮在卡片内、图标在标签里等常见布局
注意事项与优化点
事件委托不是万能的，需注意几点：
- 不是所有事件都支持冒泡（如
focus、blur），可用focusin/focusout替代 - 避免在顶层
document或body盲目委托，应尽量靠近目标元素，减少不必要的冒泡路径 - 高频事件（如
mousemove）慎用委托，可能增加判断开销；必要时加节流 - 确保父容器始终存在且不会被频繁销毁重建，否则监听器会失效
