事件代理通过减少监听器数量、避免重复绑定、降低初始化开销三方面系统性提升性能：仅需1个监听器替代百级绑定，动态内容自动生效，首屏交互更快；但不适用于非冒泡事件或静态少量元素。
JavaScript 事件代理模式提升性能，核心不是让单次点击变快，而是从三个关键维度系统性降低开销：减少监听器数量、避免重复绑定、压缩初始化负担。
大幅削减事件监听器内存占用
每个 addEventListener 都会创建一个独立的函数引用和内部对象，占用堆内存。浏览器还需维护事件处理器列表，事件触发时遍历匹配。
- 100 个按钮各自绑定 click → 100 个监听器实例，内存压力明显，垃圾回收更频繁
- 用 ul 统一代理 → 仅 1 个监听器，内存占用几乎恒定，与子元素数量无关
- 尤其在表格、消息流、无限滚动等场景中，千级节点下内存节省可达数 MB 级别
动态内容无需重新绑定
传统方式下，每次通过 innerHTML、appendChild 或框架（如 React/Vue）新增 DOM 节点，都需同步调用 addEventListener；遗漏即失效，多绑易泄漏。
- 新插入的
<li><button class="delete">删</button></li>，只要父容器监听器存在，点击立即生效 - 无需在数据渲染后遍历新节点补绑，也无需在节点移除时手动
removeEventListener - 从根本上规避因绑定/解绑失衡导致的内存泄漏风险
降低页面首次加载与重绘开销
DOM 初始化阶段，循环调用 addEventListener 是同步阻塞操作，尤其在大量节点上执行时，会拖慢首屏可交互时间（TTI）。
立即学习“Java免费学习笔记（深入）”；
- 省去遍历 500 个
li并逐个绑定的 JS 执行耗时 - 减少事件系统注册路径的 CPU 占用，让主线程更快释放给布局与绘制
- 配合虚拟滚动或懒加载时，代理逻辑一次写好，后续增删完全无感知
注意边界：它不加速冒泡本身，只优化结构成本
事件从目标元素冒泡到父级通常只需几微秒，性能瓶颈不在冒泡路径长度，而在于监听器数量和绑定逻辑复杂度。
- 别为单个按钮或静态固定元素强行代理——得不偿失
- 避免委托到
document或body做精细操作，匹配判断成本上升且易被其他脚本干扰 -
focus/blur/mouseenter/mouseleave不冒泡，不可代理（可用focusin/focusout替代前两者）
