事件委托是利用事件冒泡机制在父元素统一监听子元素事件，避免为每个子元素重复绑定，提升性能并支持动态元素；应优先用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() 调用，纯属加戏。
立即学习“Java免费学习笔记（深入）”；
- 子元素数量
- 不同子元素行为差异极大（比如有的要跳转、有的弹窗、有的发请求），委托后 if-else 一长串，不如拆开维护
- 需要精确控制事件捕获顺序或依赖
this指向原元素 → 委托后this是父元素，得靠e.target补救，容易混乱
addEventListener 前，下意识问一句：这个容器里以后会不会加新节点？现在绑的这些，是不是过两周就要被 innerHTML = '' 清掉重来？——想清楚这点，委托与否自然就定了。 
