事件委托的核心是利用事件冒泡，将监听器绑定在父元素，通过e.target.closest()等方法准确识别目标元素，避免直接依赖e.target的原始节点类型。
事件委托的核心是利用事件冒泡机制，把事件监听器绑定在父元素上，再通过 e.target 获取真正被点击的子元素。关键不是“能不能获取”，而是“如何准确识别目标元素”——因为 e.target 指向的是**原始触发事件的最深节点**，它可能是子元素、文本节点，甚至 SVG 中的 <tspan></tspan> 等，不能直接假设它是你想要的标签。
用 e.target 匹配你关心的元素
通常你要判断 e.target 是否属于某类可操作元素（比如按钮、列表项、链接），而不是盲目使用它：
- 用
e.target.matches('button')或e.target.matches('.item')判断是否符合选择器 - 用
e.target.classList.contains('delete-btn')检查是否有特定 class - 避免直接写
e.target.tagName === 'BUTTON'，因为大小写不统一（tagName总是大写，但 HTML 中可能写小写）
注意文本节点和嵌套结构
如果用户点在按钮内的文字上，e.target 可能是 <span></span> 或文本节点（Node.TEXT_NODE），而不是按钮本身：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
e.target.closest('button')向上查找最近的匹配祖先，更鲁棒 -
closest()会返回自身或父级中第一个匹配的元素，适合处理内嵌内容 - 例如：
<button><i class="icon"></i>删除</button>，点图标时e.target是<i></i>，但e.target.closest('button')仍能拿到按钮
避免误判：过滤掉非目标节点
在委托逻辑里，要主动排除不相关的点击目标：
- 检查
e.target.nodeType === Node.ELEMENT_NODE，跳过文本、注释等节点 - 用
if (!e.target.matches('.action-btn')) return;提前退出，保持逻辑清晰 - 不要对
e.target直接调用.dataset或.value，先确保它存在且有该属性
一个典型例子
给动态生成的列表项添加删除功能：
ul.addEventListener('click', function(e) {
const btn = e.target.closest('[data-action="delete"]');
if (!btn) return;
const item = btn.closest('li');
if (item) item.remove();
});
这里用 closest() 安全获取目标，不依赖 e.target 的具体层级，也不怕点在图标、文字或空白处。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
