事件委托是将监听器绑定到父容器，通过event.target判断真实点击目标，避免重复绑定、内存泄漏和动态节点失效问题。
事件委托不是“加个 onclick 就行”，而是把监听器从子元素挪到父容器，靠 event.target 判断真实点击对象——这能避免成百上千个重复监听器拖慢页面，尤其适合动态增删列表项的场景。
为什么直接给每个子元素绑 addEventListener 很危险
DOM 节点一多，内存占用和初始化时间就线性上涨；更麻烦的是，后续用 innerHTML 或 appendChild 新增的节点不会自动继承监听逻辑，得手动补绑，极易漏掉或重复绑定。
常见错误现象：
- 列表渲染后点击新添加的按钮没反应
- 滚动加载 50 条后，Chrome 内存占用涨了 20MB
- 用
removeChild删除节点后，旧监听器还在内存里没释放
用 addEventListener 在父级监听 + event.target 过滤
核心就两步：选对父容器（要有稳定 ID 或 class）、写好目标匹配逻辑。别用 document 当委托根——太宽泛，事件冒泡路径长，性能反而差。
实操建议：
- 父容器优先选最近的静态包裹元素，比如
<ul id="task-list"></ul>，而不是 - 用
event.target.matches('button.delete')判断是否点中目标，比反复查className或tagName更可靠 - 注意事件冒泡中途被
event.stopPropagation()截断的情况，委托会失效
示例：
const list = document.getElementById('task-list');
list.addEventListener('click', function (e) {
if (e.target.matches('button[data-action="delete"]')) {
const taskId = e.target.dataset.id;
deleteTask(taskId);
}
});
delegate 不是原生 API，别在生产环境手写兼容层
jQuery 的 .delegate() 已废弃，现代浏览器原生不提供类似封装。有人自己封装一个 delegate 函数，但容易忽略事件类型差异（比如 change、focus 不冒泡）和捕获阶段控制。
关键差异点：
-
click、input、keydown可委托；blur、focus、load不冒泡，不能委托 - 想监听捕获阶段？加第三个参数
true：el.addEventListener('click', fn, true) - 移动端要注意
touchstart和click的延迟与穿透问题，委托时优先用touchstart
动态内容更新后，委托监听器要不要重绑
完全不用。只要父容器没被整个 outerHTML 替换掉，委托监听器就一直有效——这是它最省心的地方。
但要注意这些边界情况：
- 父容器被
el.innerHTML = newHTML全量重写 → 监听器还在，但 DOM 引用失效，没问题 - 父容器被
el.replaceWith(newEl)替换 → 原监听器彻底丢失，必须重新绑定 - 用
DocumentFragment批量插入节点 → 委托照常工作，无需干预
真正该警惕的，是那些看似“动态”实则绕过冒泡的交互，比如用 createPortal 渲染到 body 外的 React 组件，或者 Shadow DOM 内部节点——它们不在同一事件流里，委托自然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
