事件委托通过在父元素绑定监听器利用事件冒泡处理子元素事件，减少内存占用、提升性能并天然支持动态内容；核心是用event.target识别目标元素，需选择稳定祖先节点且注意冒泡限制。
事件委托通过把事件监听器绑定在父元素上，利用事件冒泡机制来统一处理子元素的事件，避免为每个子元素单独绑定监听器，从而显著减少内存占用和DOM操作，提升页面性能。
事件委托的核心原理：事件冒泡
当用户点击某个子元素时，事件会从该元素开始，逐级向上传播到父元素，直到 document。利用这个特性，我们只需在父容器上监听一次事件，再通过 event.target 判断实际触发事件的元素，就能精准响应不同子项的操作。
- 所有支持冒泡的事件（如 click、mouseover、keydown）都可委托；focus 和 blur 默认不冒泡，需用 focusin/focusout 替代
- 委托目标必须是稳定存在的祖先节点——通常选不会频繁增删的容器，比如
<ul>、<div class="list"> - 动态添加的子元素无需重新绑定事件，天然支持，因为监听始终在父层
基础实现方式：用 event.target 匹配目标
以列表项点击为例，不给每个 <li> 绑事件，而是绑定在 <ul> 上：
document.querySelector('ul').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了列表项：', e.target.textContent);
}
});
- 用 e.target 获取真正被点击的元素，不是 this（this 指向 ul）
- 可用 e.target.matches('.btn-delete') 判断是否匹配特定选择器，比 tagName 更灵活
- 必要时用 e.stopPropagation() 阻止冒泡，但委托场景中一般不需要
性能提升的关键点
直接为 100 个按钮分别绑定 click 事件，会创建 100 个独立监听函数，占用更多内存，且每次 DOM 批量更新（如重绘列表）都要反复解绑/重绑；而委托只用 1 个监听器：
立即学习“Java免费学习笔记（深入）”；
- 内存开销大幅降低：监听器数量从 N 降到 1
- 初始化更快：无需遍历大量节点执行 addEventListener
- 动态内容友好：新增
<li>后无需任何额外 JS 操作，事件自动生效 - 维护更简单：逻辑集中，修改行为只需调整一处代码
注意事项与常见陷阱
事件委托不是万能的，使用时要注意边界情况：
- 如果父容器本身需要响应事件，而子元素又调用了 e.stopPropagation()，会导致委托失效
- 委托层级不宜过深（比如绑在 document 上处理所有按钮），会增加判断成本，也容易误匹配
- 表单元素如 <input> 的 change、input 事件冒泡正常，但部分浏览器对某些事件支持有差异，建议实测
- 用 e.currentTarget 可获取当前绑定监听器的元素（即父容器），和 e.target 不要混淆
