事件委托利用事件冒泡机制，将点击事件绑定到共同父级ul上，通过e.target.closest('li')精准捕获目标li，节省内存且支持动态元素。
事件委托利用的是事件冒泡机制，把原本绑定在每个 li 上的点击事件，改绑到它们共同的父级 ul 上。这样既节省内存，又对动态添加的 li 天然支持。
为什么能用冒泡实现委托
当用户点击某个 li 时，事件会按 DOM 树向上逐层触发：从 li → ul → body → document。只要在 ul 上监听 click，就能捕获所有子 li 冒上来的点击，再通过事件对象判断具体点的是哪一个。
核心写法：检查 event.target
在 ul 的点击回调中，不能直接操作 event.target（它可能是 li，也可能是 li 里的 span 或 button），需要向上查找最近的 li：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用
event.target.closest('li')最简洁可靠，自动找自身或祖先中匹配的选择器 - 如果需兼容老浏览器，可用循环遍历
parentNode，直到找到li或到达ul - 拿到目标
li后，就可以读取它的文本、data-id、索引等信息做业务处理
完整示例代码
HTML：
- 苹果
- 香蕉
- 橙子
JavaScript：
document.getElementById('list').addEventListener('click', function(e) {<br> const li = e.target.closest('li');<br> if (!li) return; // 点的不是 li 或其后代，忽略<br> console.log('点击了：', li.textContent, 'ID：', li.dataset.id);<br>});
注意事项
- 确保
ul是真正稳定的父容器，不要用document或body做委托目标，除非必要——太宽泛容易误触发 - 避免在委托回调里频繁操作 DOM 或执行重逻辑，影响响应速度
- 如果
li内有阻止冒泡的元素（如e.stopPropagation()），委托会失效，需协调好内部逻辑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
