什么是事件委托？它的原理和优缺点是什么？

简化版

事件委托是把子元素事件监听绑定到父元素上，利用事件冒泡统一处理。它能减少监听器数量，适合动态列表；缺点是需要判断事件来源，不适合不冒泡或强依赖独立行为的事件。

详细版

示例：

list.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item || !list.contains(item)) return;
  console.log(item.dataset.id);
});

点击 .item 时，事件会从目标元素向父级冒泡，父元素 list 可以统一接住事件。

优点：

减少大量子元素事件绑定。
动态新增的子元素无需重新绑定。
统一管理逻辑。

注意点：

用 closest 找到真正目标。
判断目标是否仍在容器内。
focus、blur 等事件默认不冒泡，可用 focusin、focusout。

完整版教学

一、事件流是事件委托的基础

浏览器事件传播通常经历捕获、目标、冒泡三个阶段。事件委托主要利用冒泡阶段：子元素触发事件后，父元素也能收到。

这意味着我们不必给每个子节点绑定监听器，而是在共同父节点上处理。监听器默认参与非捕获阶段，事件到达目标后沿祖先反向传播时触发父级回调，这条传播路径就是委托能够覆盖动态后代的机制。

二、为什么动态列表特别适合委托

如果列表有 1000 项，逐个绑定点击事件会产生 1000 个监听器。列表还可能分页、筛选、增删，维护成本很高。

事件委托只绑定一次：

ul.addEventListener('click', handler);

后续新增的 li 只要在 ul 里面，就自动能被处理。

三、target 和 currentTarget 的区别

event.target 是真正触发事件的元素，可能是按钮里的图标。event.currentTarget 是当前绑定监听器的元素，也就是父容器。

因此事件委托里经常不能直接用 target，而要用 closest 向上找符合条件的元素。

四、事件委托的边界

不是所有事件都适合委托。比如鼠标进入离开相关事件、焦点事件、需要阻止冒泡的复杂交互，都要仔细处理。

另外，父容器逻辑过重也会让事件处理函数变成“大杂烩”，这时应该拆分判断或使用组件框架的事件系统。子组件调用 stopPropagation()、事件不具备 bubbling 标志或跨越封装边界时，父级可能收不到事件，因此委托依赖明确的事件契约。

五、面试追问与工程落地

事件委托常见追问是“如果点击的是子元素内部图标怎么办”。答案是不能直接假设 event.target 就是目标项，而要用 closest 向上寻找匹配节点，并用容器的 contains 防止匹配到容器外部的元素。

还会追问性能边界。事件委托减少监听器数量，但父容器的处理逻辑如果非常复杂，每次事件都做大量 DOM 查询，也会变慢。要把选择器判断写得明确，必要时按区域拆分委托。

工程里要注意组件框架的合成事件或事件修饰符。Vue/React 已经帮你做了很多事件管理，但长列表、动态菜单、富文本内容区域仍然会用到委托思想。理解原理可以帮助你排查冒泡、阻止传播和动态节点绑定问题。

六、按传播路径推演一次委托

假设结构是 ul > li[data-id] > button > svg，用户点击 svg。事件目标是 svg，冒泡监听执行到 ul 时 currentTarget 是 ul；target.closest('[data-id]') 才能得到业务项 li。若页面有 1000个列表项，逐项方案建立 1000个 click 监听器，委托方案通常只需父级的 1个，但性能收益仍取决于每次父级处理逻辑的成本。

捕获: window → document → ul → li → button → svg
目标:                                      svg
冒泡: svg → button → li → ul → document → window

事件或场景	能否直接冒泡委托	常见处理
`click`	可以	`closest` + 容器边界检查
`focus` / `blur`	默认不冒泡	使用捕获或 `focusin` / `focusout`
`mouseenter` / `mouseleave`	不冒泡	考虑 `mouseover` / `mouseout` 并判断 relatedTarget
Shadow DOM 内部事件	取决于 `composed` 与重定向	必要时检查 `composedPath()`
子项主动停止传播	父级可能收不到	调整组件事件契约或监听阶段

list.contains(item) 的检查不是多余代码：closest 会沿祖先继续查找，若委托容器本身嵌在另一个同类节点中，可能匹配到容器之外的祖先。更严格的写法还要确认业务项确实属于当前列表，而不是嵌套子列表。

现代事件监听还可以把 AbortSignal 作为统一生命周期开关。一个组件若注册 click、keydown 等 3个监听器，可以让它们共享同一 signal，卸载时调用一次 abort()，浏览器便移除相关监听器；这减少了遗漏清理的概率，但不能替代对委托范围和回调引用的设计。

const controller = new AbortController();
list.addEventListener('click', onClick, { signal: controller.signal });
window.addEventListener('keydown', onKeydown, { signal: controller.signal });
controller.abort();

委托依据的是事件传播路径，不是“父元素能读取所有子元素事件”；先确认事件是否冒泡、是否跨 Shadow DOM、途中是否被停止传播。

七、常见误区与追问

误区：事件委托后 event.target 就是绑定选择器对应的元素。 target 是最初派发目标，点击按钮内图标时它可能是 svg 或 path。
误区：所有 DOM 事件都会冒泡到父元素。 每种事件的 bubbles 语义不同，focus、blur、mouseenter 等不能直接套普通冒泡委托。
误区：委托层级越高越省性能。 挂到 document 会扩大匹配范围和耦合度，应选择能稳定覆盖动态子项的最近公共祖先。
追问：target 和 currentTarget 分别是什么？ 前者是事件派发目标，后者是当前正在执行其监听器的 EventTarget，会随传播路径变化。
追问：stopPropagation 与 stopImmediatePropagation 有何区别？ 前者阻止事件继续到其他节点，后者还会阻止当前节点上后续监听器执行。
追问：Shadow DOM 为什么可能让 target 看起来变了？ 事件跨封装边界时可能重定向 target，开放路径分析可使用 composedPath()，同时尊重 closed shadow 的封装。
追问：动态节点为什么无需重新绑定？ 监听器属于稳定父节点，新节点触发的可冒泡事件仍会经过该父节点的传播路径。

八、加强记忆

事件委托的记忆锚点是“子元素冒泡，父元素代办”。它的价值是少绑事件、适配动态节点；关键细节是分清 target、currentTarget，用 closest 找业务目标。

简化版

详细版