事件委托的本质是利用事件冒泡让父元素代为处理子元素事件，通过监听父元素并用event.target判断目标，实现一个监听器管理多个子元素，显著减少内存占用和DOM操作，适用于动态内容，但需注意目标过滤、边界选择及行为异构场景。
事件委托的本质就是“让父元素代劳”
它不是新语法，而是利用浏览器原生的 event bubbling（事件冒泡）机制：子元素触发事件后，事件会自动往上传到父元素。你只需在父元素上监听一次，再用 event.target 判断实际点击的是哪个子元素——这就完成了“一个监听器管所有子元素”的效果。
为什么能提升效率？关键在减少监听器数量
假设一个表格有 200 行，每行都有删除按钮。传统做法是循环给每个按钮加 addEventListener('click', handler)，结果就是 200 个独立监听器；而事件委托只在 <table> 上绑定 1 个监听器。
- 内存占用直降：200 个闭包 → 1 个闭包
- DOM 操作更轻：动态插入新行时，无需再调用
addEvent，新按钮天然响应 - 初始化更快：避免大量重复的 JS 绑定逻辑，尤其利于首屏渲染
怎么写才不出错？三个实操要点
常见错误是没过滤目标、没处理文本节点、或误判了事件源。
- 永远检查
event.target是否为预期元素：if (e.target.matches('button.delete'))，别直接用e.target.tagName === 'BUTTON'（可能点到按钮里的文字节点） - 用
e.target.closest('button')更鲁棒：它会向上查找最近匹配的祖先，哪怕你点的是按钮内的<span>也能捕获 - 避免在父元素上监听太多事件类型：比如给
<body>绑click+keydown+input，会增加判断开销；应尽量靠近真实操作区域（如只在#list上处理列表相关事件）
动态内容场景下，它是唯一靠谱的选择
比如用 fetch 加载完数据后用 innerHTML 插入一批新 <li>，传统绑定方式完全失效——你根本没机会给它们加监听器。但事件委托不care这个：只要父容器存在，新元素一挂上去就能响应。
立即学习“Java免费学习笔记（深入）”；
注意一点：如果父容器本身是动态创建的（比如模态框每次弹出都新建 DOM），那监听器得在它插入文档后、或用事件委托链式挂到更稳定的祖先（如 document）上，否则会漏掉第一次触发。
真正容易被忽略的是事件委托的“边界感”：它高效，但不是万能胶布。当子元素行为差异极大（比如有的要跳转、有的要弹窗、有的要发请求），硬塞进一个监听器里做一堆 if/else，反而让逻辑更难维护。这时候该拆还是得拆——委托解决的是“量”的问题，不是“异构”的问题。
