事件委托通过外层容器统一监听并用closest()精准定位目标项，避免为每个子项单独绑定事件，显著提升嵌套列表性能，尤其适用于深层级、多节点或动态增删场景。
事件委托能显著优化嵌套列表的性能，核心在于避免为每个子项单独绑定监听器，转而利用冒泡机制由外层容器统一响应。尤其当列表层级深、节点多或动态增删频繁时，这种优化效果更明显。
用 closest() 精准定位目标项
嵌套结构中，e.target 可能指向任意内部元素（如 span、div、图标），直接判断 tagName 或 class 容易失效。推荐使用 closest() 向上查找最近的语义化容器：
- 写法示例：
const item = e.target.closest('li'); - 它会从点击位置开始逐级向上匹配，直到找到第一个
<li>，无论内部嵌套多深 -
必须显式判断返回值：如果没匹配到，
closest()返回null，后续调用.dataset.id会报错
避免用 matches() 或 tagName 做脆弱匹配
像 e.target.tagName === 'LI' 或 e.target.matches('.list-item') 在嵌套场景下容易漏判：
- 前者只认直接点击的标签名，点到内部
<span></span>就失效 - 后者依赖 class 名，若子元素也恰好有相同 class，可能误触发
-
closest()更健壮——它关心的是“属于哪个逻辑项”，而不是“当前点在哪一层”
统一处理 data 属性，别依赖 event.target
嵌套时，e.target 指向最深点击元素，但业务数据往往在父级 <li> 上。此时应从 closest() 结果读取：
- 正确：
const li = e.target.closest('li'); console.log(li?.dataset.id); - 错误：
console.log(e.target.dataset.id);（内部元素通常没有该属性） - 不建议用
e.currentTarget替代——它固定指向绑定监听器的容器，无法获取具体被点中的项
动态列表天然受益，无需额外操作
新增的 <li> 元素自动响应已有委托逻辑，完全不用手动绑定：
- 比如用
ul.insertAdjacentHTML('beforeend', '<li data-id="5">新项</li>'); - 新
<li>点击后，closest('li')依然能正确捕获并提取 data-id - 省去遍历、查 DOM、重复
addEventListener的开销
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
