事件委托通过在父容器绑定单个监听器并用event.target.closest()识别目标元素，将内存开销从o(n)降至o(1)，天然支持动态dom增删，但需在父容器移除前主动清理监听器。
把事件监听器统一挂到父容器上，用 event.target 或 closest() 判断真实点击目标，就能避免为每个列表项单独创建监听函数，内存开销从 O(n) 降到 O(1)。
只在父元素绑定一次监听器
不要遍历所有 li 或按钮逐个调用 addEventListener。直接选中它们的共同父级（如 <ul></ul>、<div class="list">），绑定一个事件监听器即可。
<ul>
<li>100 个列表项 → 传统方式生成 100 个独立函数实例；事件委托只需 1 个函数实例</li>
<li>监听器数量减少，闭包环境、事件引用等内存开销同步大幅下降</li>
<li>初始化 DOM 时无需循环，页面加载更快</li>
</ul>
<h3>精准识别目标元素，防止误触发</h3>
<p>父元素监听后，必须验证 <code>e.target 是否是你真正要响应的子元素类型，否则点到空白、文字或图标都会进入处理逻辑。
- 推荐用
e.target.closest('li')获取最近的匹配祖先或自身，比e.target.tagName === 'LI'更健壮（兼容li内嵌span、i等情况） - 避免依赖类名判断，如
e.target.classList.contains('item')—— 类名易冲突、难维护，优先用语义化标签或data-属性，例如e.target.matches('li[data-action="delete"]')
天然适配动态增删的 DOM
AJAX 加载新列表项、用户新增任务、表格分页切换等场景下，新插入的元素无需额外绑定事件，自动生效。
- 不用监听“节点新增”再补绑，也不用担心旧监听器残留导致内存泄漏
- 删除某项时，不需手动
removeEventListener，父容器监听器照常工作 - 配合
innerHTML或模板字符串插入新li后，点击立即响应
别忘了清理父容器监听器
事件委托虽省事，但若父容器本身被移除（如组件卸载、单页应用路由跳转），仍需主动调用 removeEventListener，否则监听器持续驻留内存。
- 建议在组件销毁、模块退出前统一清理，例如：
parent.removeEventListener('click', handler) - 可使用 AbortController 配合
signal选项简化生命周期管理（现代浏览器支持）
