概念定义
冒泡把事件从最深的目标逐级带向祖先。顶层一个监听器即可服务整棵子树:检查传播路径、找到匹配选择器的第一个元素、分发处理。注册数量不再随条目数增长,新增子元素无需再绑定。
工作机制
处理器用 event.target.closest(selector) 找到命中元素并处理,容器信息可读 currentTarget。focus、blur 等不冒泡的事件要用捕获阶段或 focusin、focusout 委托。路径上任何 stopPropagation 都会截断委托,这是典型排障信号。
使用场景
动态列表、带操作按钮的表格、菜单、文档级键盘处理。在 shadow DOM 内,composed 事件会在边界重定向,跨影子边界的委托需要检查 composedPath。
常见误区
事件委托不只是性能手段,更是一种架构:单处理器加选择器分发。直接匹配 event.target 会漏掉行内嵌套子元素的点击,必须用 closest。mousemove 等热路径上繁重的选择器逻辑可能比直接监听更贵;委托的滚动观察器同样要注册为 passive。