事件委托利用事件冒泡机制，通过父元素监听并用event.target.closest()精准识别目标子元素，适用于动态内容、大量子元素和统一逻辑管理，但需避开不冒泡事件及stoppropagation干扰。
JavaScript 中事件委托通过父元素管理子元素事件，核心是利用浏览器原生的事件冒泡机制：子元素触发事件后，事件会自动沿 DOM 树向上传播到父元素。你只需在父元素上设置一个监听器，再用 event.target 判断实际被点击（或触发）的是哪个子元素，从而执行对应逻辑。
为什么能用父元素“代管”子元素事件？
因为 DOM 事件默认经历三个阶段——捕获、目标、冒泡。事件委托依赖的是冒泡阶段：哪怕你只在 <ul></ul> 上监听 click，当用户点中某个 <li> 时，这个 click 事件也会从 <li> 一层层往上冒泡到 <ul></ul>，最终被监听器捕获。
-
event.target指向真正被点击的元素（比如某个<li>） -
event.currentTarget指向当前绑定监听器的元素（比如<ul></ul>） - 二者通常不同，正是靠区分它们，才能精准响应目标子元素
怎么写一个可靠的委托监听器？
关键不在“绑在哪”，而在“怎么判断目标”。不能只看 event.target.tagName === 'LI'，因为如果 <li> 里还有 <span></span> 或图标，点击它们时 event.target 就是 <span></span>，不是 <li>。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 推荐用
e.target.closest('li')—— 它会向上查找最近的匹配祖先，兼容嵌套结构 - 也可以用
e.target.matches('li, li *')配合条件过滤，但closest()更直观安全 - 避免委托给太远的祖先（如
document），优先选直接父容器，减少冒泡路径和误判风险
它特别适合哪些场景？
事件委托的价值，在于解决传统逐个绑定带来的维护难题：
-
动态内容：用 JS 新增的
<li>无需重新绑定，天然响应 - 大量子元素：100 个按钮，不用建 100 个监听器，内存和初始化开销明显下降
- 统一逻辑入口：所有列表操作（删除、编辑、高亮）集中在一个函数里处理，改一处全生效
要注意什么边界情况？
不是所有事件都适合委托。有些事件不冒泡，或冒泡行为受限：
-
focus、blur、mouseenter、mouseleave默认不冒泡，需换用focusin/focusout等可冒泡替代事件 - 子元素若调用了
e.stopPropagation()，会中断冒泡，导致父监听器收不到事件 - 表单控件（如
<input>）的某些交互（如input事件）虽冒泡，但需注意触发时机和值获取方式
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
