事件委托利用事件冒泡，由父元素统一监听子元素点击，节省内存、支持动态内容；核心是通过event.target匹配目标元素，推荐用matches()或closest()精准捕获，注意target与currenttarget区别及常见陷阱。
事件委托利用事件冒泡机制，让父元素监听子元素的点击事件，避免为每个子项单独绑定事件，节省内存、提升性能，也适用于动态添加的子元素。
核心原理：事件冒泡 + target 判断
点击子元素时，事件会逐级向上冒泡到父元素。父元素通过 event.target 获取实际被点击的元素，再用 matches() 或其他方式判断是否属于目标子项（比如 li、.btn 等）。
- 必须确保父元素是子元素的**共同且稳定的祖先容器**（如
<ul></ul>、<div class="list">） <li>推荐用 <code>event.target.matches(selector)判断，兼容性好、语义清晰（支持类名、标签名、属性选择器等） - 注意区分
event.target（真正点击的元素）和event.currentTarget（当前绑定事件的父元素）
基础实现示例
假设有一个动态列表，所有 <li> 都需要响应点击：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const list = document.getElementById('myList');
list.addEventListener('click', function (e) {
if (e.target.matches('li')) {
console.log('点击了 li：', e.target.textContent);
}
});
如果只希望处理带特定类的按钮，可写成 e.target.matches('.delete-btn') 或 e.target.classList.contains('delete-btn')。
处理动态内容与防止误触发
新增的 li 元素无需重新绑定事件，天然支持；但要注意嵌套结构中 target 可能是子元素（如 <span></span> 或图标），此时可用 closest() 向上查找最近匹配的祖先：
- 用
e.target.closest('li')获取被点击的li（即使点在内部<span></span>上也有效） - 加空值判断：
const clickedLi = e.target.closest('li'); if (clickedLi) { ... } - 避免在父元素自身或无关子节点上执行逻辑，提升健壮性
常见陷阱提醒
不给父元素设 明确高度/宽度/显示样式 可能导致点击区域不可见（尤其空父容器）；不要在委托逻辑里频繁调用 querySelectorAll —— 这违背委托“少查多用”的初衷；若需阻止默认行为（如链接跳转），应在判断命中后调用 e.preventDefault()，而非无条件调用。
