核心是策略性控制事件冒泡：优先用事件委托减少监听器数量，精准拦截不滥用stoppropagation，高频事件结合节流/防抖，及时清理无效监听器。
避免事件冒泡带来的不必要性能消耗，核心不是一概禁止冒泡，而是有策略地控制传播路径、减少监听器数量、降低处理开销。关键在于“该冒的让它冒，不该冒的及时截断”，同时用更高效的方式替代高频绑定。
优先用事件委托代替逐个绑定
当多个子元素（如列表项、按钮组）需响应同类事件时，为每个元素单独绑定监听器会显著增加内存占用和事件注册开销，且动态增删元素还需反复绑定/解绑。
- 只在父容器上设一个监听器，通过 event.target 判断触发源
- 支持动态添加的子元素，无需重新绑定
- 大幅减少 DOM 事件监听器总数，缓解内存压力
示例：document.querySelector('ul').addEventListener('click', e => { if (e.target.matches('li')) console.log('点击了某项'); });
精准拦截，不滥用 stopPropagation
stopPropagation() 是阻断冒泡的直接手段，但应只在明确需要隔离行为时使用。盲目调用会破坏事件委托机制，反而引发维护问题或逻辑断裂。
- 仅在子元素逻辑与父级完全无关时调用（如弹窗内部点击不关闭遮罩）
- 避免在通用组件中无条件调用，防止父级无法捕获事件
- 若只需阻止后续监听器执行，用 stopImmediatePropagation() 更精确
结合节流/防抖控制高频事件响应
滚动、缩放、鼠标移动等事件天然高频，若在冒泡路径中每个层级都做重计算或 DOM 操作，极易造成卡顿。
- 对 resize、scroll 等事件使用 throttle（固定间隔执行）或 debounce（延迟执行）
- 将耗时操作移出事件回调，改用 requestAnimationFrame 批量更新视图
- 避免在冒泡过程中的任意一层执行强制布局（如读取 offsetHeight 后立即修改样式）
清理不再需要的监听器
长期存在的页面中，若组件卸载或状态变更后未移除监听器，残留的回调仍会随冒泡被调用，造成隐性性能泄漏。
- 使用 { once: true } 选项绑定一次性事件（如初始化后只响应一次的点击）
- 在组件销毁时显式调用 removeEventListener（注意函数引用必须一致）
- 对动态生成的监听器，建立映射表统一管理生命周期
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
