事件委托能减少监听器数量是因为DOM事件会向上冒泡，只需在共同父容器监听一次，再通过event.target判断目标元素；适用于动态增删子节点场景，但需选择最近稳定父级而非document，且仅冒泡事件（如click、input）支持，focus/blur等需用focusin/focusout替代。
事件委托为什么能减少监听器数量
因为 DOM 事件会向上冒泡，你不需要给每个子元素单独绑定 click、input 等事件，只要在它们的共同父容器上监听一次，再通过 event.target 判断实际点击的是哪个元素即可。这在动态增删子节点（比如列表项）时特别有用——新添加的元素无需重新绑定事件。
常见错误是直接在 document 或 body 上监听所有事件，导致每次点击都触发判断逻辑，影响性能；更合理的做法是把委托节点控制在离目标最近的**稳定父级**，比如一个 document。
如何正确写一个按钮点击的事件委托
假设页面有多个动态生成的按钮，类名都是 btn-delete，你想统一处理删除逻辑：
document.getElementById('list').addEventListener('click', function (e) {
if (e.target.classList.contains('btn-delete')) {
const item = e.target.closest('li'); // 找到对应的列表项
if (item) {
item.remove();
}
}
});
关键点：
立即学习“Java免费学习笔记（深入）”；
-
e.target是真正被点击的元素（可能是或，不一定是按钮本身），所以用closest()向上找最近的语义化容器更可靠 - 不要用
e.currentTarget === e.target来判断是否“点击了按钮”，这只能说明没发生冒泡，不是委托的本意 - 如果按钮内含图标或文字标签，
e.target可能是子元素，直接读e.target.dataset.id容易报错，应先closest('button')
哪些事件不支持事件委托
不是所有事件都会冒泡。以下事件无法通过父元素捕获：
-
focus、blur：要用focusin和focusout替代（它们支持冒泡） -
mouseenter、mouseleave：本身不冒泡，但mouseover和mouseout会冒泡，只是触发频率更高、逻辑更复杂 -
load、error（对scroll：不冒泡，不能委托
判断方法很简单：查 MDN 文档中该事件的 “Bubbles” 字段是否为 “Yes”。不确定时，优先查表，别靠经验猜。
阻止事件委托后意外影响其他逻辑
在委托回调里调用 e.stopPropagation() 是危险操作——它会中断冒泡路径，导致父级或其他组件监听不到这个事件。例如，你在按钮上阻止了冒泡，但外层有个模态框监听 click 关闭自身，就会失效。
更安全的做法：
- 只在必要时阻止，比如防止表单重复提交，且明确知道不影响其他监听器
- 用
e.stopImmediatePropagation()仅阻止同一事件阶段的其他监听器，不影响冒泡本身 - 优先用业务逻辑隔离，比如加个
data-ignore="delegate"属性，在委托回调里跳过处理，而不是暴力阻止
委托的本质是“让父节点代劳”，一旦打断冒泡，就违背了这个前提。多数时候，你真正需要的不是阻止，而是精准过滤条件。
