17370845950

事件委托是利用事件冒泡机制在父元素统一监听子元素事件，避免为每个子元素重复绑定，提升性能并支持动态元素；应优先用closest()精准匹配目标，避免绑定到document/body，且focus/blur等不冒泡事件需特殊处理。

事件委托就是把 click 绑在父元素上，而不是每个子元素都绑一次

它不是什么黑科技，就是利用浏览器原生的 事件冒泡：你点一个 li，这个 click 会自动往上传到它的 ul、div，直到 document。所以你只要在父容器上监听一次，再用 event.target 看看到底点的是谁，就完事了。

• 不用为 100 个按钮分别调用 addEventListener，只绑 1 次
• 后续用 JS 插入的新 li，不用额外写绑定逻辑，天然响应
• 每个监听器都是一个 JS 对象，少建 99 个，内存和 GC 压力明显下降
• DOM 操作次数从 100 次降到 1 次，减少重排重绘触发频率

怎么写才不踩坑？优先用 closest() 判断目标

别再手写 if (e.target.tagName === 'LI') 或 e.target.className.indexOf('item') !== -1 —— 容易漏掉嵌套内容（比如 li 里有 span 或图标，实际点击的是子节点）。

document.getElementById('list').addEventListener('click', function(e) {
  const item = e.target.closest('li');
  if (item) {
    console.log('点了第', item.dataset.id, '项');
  }
});

• closest() 会从 e.target 自身开始向上查，找到第一个匹配的选择器（包括自己），语义清晰、兼容性好（IE11+）
• 避免用 matches() 直接判 e.target，它不处理祖先路径，点到子元素就失效
• 别把监听器挂到 document 或 body 上——太泛，容易被其他模块干扰，也增加事件路径长度

哪些事件不能用事件委托？focus / blur 就不行

因为它们默认不冒泡。你给 input 的父元素绑 focus，永远收不到。

• 可用 focusin 和 focusout 替代（它们支持冒泡）
• mouseenter/mouseleave 也不冒泡，但通常不需要委托——它们本就是为“进入/离开容器”设计的
• 自定义事件默认不冒泡，需手动设 bubbles: true
• 所有依赖精确捕获阶段的逻辑（如阻止外层表单提交），委托后得靠 e.stopPropagation() 控制，但要小心别误伤其他监听器

什么时候其实没必要用？别为了委托而委托

只有 3 个静态按钮，还非要用事件委托，反而多一层判断、多一次 closest() 调用，纯属加戏。

• 子元素数量
• 不同子元素行为差异极大（比如有的要跳转、有的弹窗、有的发请求），委托后 if-else 一长串，不如拆开维护
• 需要精确控制事件捕获顺序或依赖 this 指向原元素 → 委托后 this 是父元素，得靠 e.target 补救，容易混乱

真正关键的不是“会不会用”，是每次写 addEventListener 前，下意识问一句：这个容器里以后会不会加新节点？现在绑的这些，是不是过两周就要被 innerHTML = '' 清掉重来？——想清楚这点，委托与否自然就定了。