事件委托是通过父元素监听子元素事件，利用事件冒泡机制统一处理动态列表项点击逻辑；只需为ul绑定一次click，用event.target.closest('.item')精准识别目标，新增li无需重复绑定。
事件委托是通过父元素监听子元素的事件，避免为每个动态生成的列表项单独绑定事件，既节省内存又适配后续新增项。
原理：利用事件冒泡机制
点击子元素时，事件会逐级向上冒泡到父元素。只要在父容器上监听事件，再通过 event.target 判断实际被点击的是哪个子节点，就能统一处理所有列表项的点击逻辑。
基础写法：给 ul 绑定 click，用 class 区分目标
假设 HTML 结构如下：
- 苹果
- 香蕉
```
JavaScript 可这样写：
- 获取父容器 ul，绑定一次 click 事件
- 在回调中检查 event.target.classList.contains('item')
- 用 event.target.dataset.id 获取对应数据
动态添加新项时无需重新绑定
后续通过 JS 插入新 li 元素（比如 list.innerHTML += '<li class="item" data-id="3">橙子</li>'），它自动响应同一事件监听器，不用再调用 addEventListener。
注意边界：避免误触发父容器或非目标元素
推荐用 closest() 方法精准捕获最近的匹配祖先，更健壮：
const item = event.target.closest('.item');- 如果
item存在，再执行业务逻辑；否则忽略 - 这样即使用户点在文字、图标或内嵌标签上，也能正确识别所属列表项
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
