在事件代理中，this指向绑定事件的父元素而非触发事件的子元素，应使用event.target获取实际触发元素，用event.currentTarget或this获取委托容器，配合closest()可精准定位目标。

在事件代理中，this 指向的是**绑定事件的父元素（委托容器）**，不是真正触发事件的子元素。所以不能直接用 this 获取目标元素，而要用事件对象的 event.target 或 event.currentTarget。

区分 event.target 和 event.currentTarget

event.target：实际被点击/触发的最内层元素（可能为子元素或后代元素）。
event.currentTarget：当前绑定事件监听器的元素（即委托容器，等价于 this）。

✅ 正确做法是使用 event.target 来获取真正触发事件的元素：

• 它始终指向用户交互发生的那个具体 DOM 节点
• 即使事件从子元素冒泡上来，target 也不会变
• 配合 closest() 可精准匹配符合条件的目标（如指定 class 或标签）

用 closest() 精准定位委托目标

如果只想处理特定类型子元素（比如所有 或带 data-action 的元素），推荐用 event.target.closest(selector)：

• 它从 target 开始向上查找，返回第一个匹配选择器的祖先（包括自身）
• 避免手动遍历父级或判断 tagName/className
• 返回 null 表示没找到，可安全做条件判断

示例：// 点击任意子元素，只对 .item 做处理

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

list.addEventListener('click', function (e) {
  const item = e.target.closest('.item');
  if (item) {
    console.log('点击了 item:', item);
  }
});

避免误触发：过滤非目标元素

委托后，任何子元素点击都会触发回调。若不加判断，可能对文本、图标甚至空白区域响应——这不是想要的行为：

• 检查 e.target 是否为期望的元素类型（如 e.target.tagName === 'BUTTON'）
• 更健壮的方式是结合 closest() 或 matches()
• 注意：e.target 可能是文本节点（nodeType === 3），需用 e.target.parentElement 或直接用 closest

不要依赖 this 获取触发元素

this 在事件代理中固定为绑定事件的元素，比如：

• 给 ul 绑事件，this 就是那个 ul 元素
• 哪怕你点的是 ul > li > span，this 仍是 ul
• 想获取 span？必须靠 e.target 或 e.target.closest(...)

不复杂但容易忽略。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南