事件委托通过在父容器绑定单个监听器利用冒泡机制处理子元素事件，减少内存占用和dom操作；用closest()精准捕获目标，结合data-id提取数据，注意防抖节流及兼容性。
事件委托通过把事件监听器绑定在父容器上，而不是每个列表项上，能显著减少内存占用和 DOM 操作，尤其适合动态增删项或长列表场景。
用父元素监听代替遍历绑定
避免为每个 <li> 单独调用 addEventListener。改用一个事件监听器挂在 <ul></ul> 或外层容器上，利用事件冒泡机制捕获点击。
- 静态列表：即使有 1000 个 item，也只注册 1 个监听器
- 动态列表：新增
<li>不需要重新绑定，直接响应 - 示例：
document.querySelector('ul').addEventListener('click', e => { if (e.target.tagName === 'LI') { /* 处理点击 */ } });
精准识别目标元素
点击可能落在 <li> 内的文本、图标或按钮上，不能只依赖 e.target 是 <li>。要用 closest() 向上查找最近的匹配祖先。
-
const li = e.target.closest('li');能正确捕获子元素触发的点击 - 配合自定义属性（如
data-id）提取业务数据：li?.dataset.id - 避免用
parentNode或多层if判断，语义清晰且健壮
避免频繁重排重绘与逻辑阻塞
委托本身不解决处理函数性能问题。若点击后执行复杂操作（如渲染、大量计算），仍会卡顿。
- 把耗时操作节流、防抖或移到微任务（
Promise.resolve().then(...)）中延迟执行 - 避免在事件回调里直接修改多个 DOM 节点；优先用
classList切换状态，而非内联样式 - 必要时用
e.stopPropagation()防止多余冒泡，但需谨慎——多数情况不需要
兼容性与边界注意
现代浏览器均支持 closest() 和事件委托，但需留意老旧环境或特殊结构。
- IE11 不支持
closest()，可用 polyfill 或手动向上遍历 - 确保父容器是实际事件冒泡路径上的“可靠容器”——避免中间有
pointer-events: none或stopPropagation - 如果列表项含可交互子元素（如开关、删除按钮），应区分点击区域，用
e.target.matches('.btn-delete')单独处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
