事件委托的核心是利用事件冒泡，将监听绑定在父元素，再通过 e.target 和 closest() 等方法精准定位业务目标节点，而非直接操作 e.target。
事件委托的核心是利用事件冒泡，把事件监听绑定在父元素上，再通过 e.target 获取**实际被点击的最深子节点**。要精准识别目标子节点，关键不是只看 e.target，而是结合节点类型、属性、层级关系做判断和向上查找。
区分 e.target 和真正要操作的业务节点
e.target 总是触发事件的原始元素（可能是一个文字、图标、span 或按钮内部的子标签），但你的业务逻辑往往需要的是某个“可交互单元”，比如整个 .item 或 .btn 容器。直接对 e.target 做操作容易出错。
- 点击按钮内的图标 →
e.target是<i>标签，不是<button> - 点击列表项的文字 →
e.target是<span>，但你想响应的是整个<li class="list-item"> - 解决办法：从
e.target开始向上遍历（closest()），找第一个匹配业务选择器的祖先元素
用 closest() 安全定位目标容器
element.closest(selector) 会检查自身及所有祖先，返回第一个匹配的选择器的元素，找不到则返回 null。这是最推荐的方式，简洁、健壮、语义清晰。
document.getElementById('list').addEventListener('click', function(e) {
const item = e.target.closest('.list-item');
if (item) {
console.log('点击了列表项：', item.dataset.id);
return;
}
const deleteBtn = e.target.closest('[data-action="delete"]');
if (deleteBtn) {
const id = deleteBtn.closest('.list-item')?.dataset.id;
console.log('删除项 ID：', id);
}
});
避免误判：过滤文本节点和无关元素
e.target 可能是文本节点（nodeType === 3）、注释节点或禁用元素。实际处理前建议先排除：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用
e.target.nodeType !== 1过滤非元素节点（如纯文本） - 用
e.target.disabled或getComputedStyle(e.target).pointerEvents === 'none'忽略不可交互元素 - 用
e.target.matches('button, a, [role="button"], [tabindex]')快速判断是否为常规可点击元素（按需调整）
需要精确到某类子元素时：用 matches() + parentNode 配合
如果业务要求必须是「按钮里的图标」或「标题下的编辑链接」，不能靠 closest() 向上找容器，就得向下/向侧验证关系：
- 先确认
e.target.matches('.icon-delete') - 再确认它的父节点是否是
.action-btn：e.target.parentNode.matches('.action-btn') - 或者用
e.target.closest('.action-btn')?.querySelector('.icon-delete') === e.target确保它是该容器内指定的子元素
不复杂但容易忽略：e.target 是起点，不是终点；精准识别靠的是有目的的查找和合理的边界判断。
