JavaScript事件委托是利用事件冒泡将监听器绑定在父元素上，通过e.target识别实际触发元素，减少监听器数量、避免重复绑定、降低DOM访问频率并简化管理，适用于动态元素，但需注意非冒泡事件及目标节点类型等边界情况。
JavaScript事件委托是一种利用事件冒泡机制，将事件监听器绑定在父元素上，而不是为每个子元素单独绑定监听器的技术。它能显著减少内存占用和DOM操作，尤其在处理大量动态生成的元素时，性能优势明显。
事件委托的核心原理
当用户触发某个子元素上的事件（比如点击），该事件会沿着DOM树向上“冒泡”到其祖先元素。事件委托正是抓住这一特性，把监听逻辑统一放在共同的父容器上，再通过事件对象的 target 属性识别实际被点击的是哪个子元素。
例如：一个包含100个列表项（li）的 ul，不使用委托就得绑定100次 click；用委托只需在 ul 上绑定1次，就能响应所有 li 的点击。
为什么能提升性能？
- 减少事件监听器数量：每个监听器都会占用内存和初始化开销，委托把N个监听器压缩为1个
- 避免重复绑定：动态添加的新子元素自动生效，无需重新调用 addEventListener
- 降低DOM访问频率：不需要遍历所有子节点去绑定事件，尤其在初始渲染或频繁增删节点时更明显
- 简化事件管理：移除监听器时只需操作父级，不用追踪每个子元素的引用
一个典型写法示例
假设要监听所有按钮的点击：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('container').addEventListener('click', function(e) {
if (e.target.matches('button')) {
console.log('按钮被点了：', e.target.textContent);
}
});
这里 e.target 是真正被点击的元素，matches() 用于安全判断是否符合目标选择器，比直接检查 class 或 tagName 更灵活可靠。
需要注意的边界情况
- 不是所有事件都支持冒泡（如 focus、blur、mouseenter、mouseleave），需改用捕获阶段或替代方案
- 父容器不能是 display: none 或被移出DOM，否则事件无法到达
- 确保 e.target 不是文本节点（比如点击了按钮内的文字），可用 e.target.closest('button') 更稳妥
