JavaScript 中怎么在事件委托中正确获取触发元素的 this-js教程-PHP中文网

事件委托中this指向绑定监听器的父容器，event.target指向实际触发事件的元素；应使用e.target.closest()安全获取目标元素，避免直接用this或未处理的e.target。

javascript 中怎么在事件委托中正确获取触发元素的 this

在事件委托中，this 指向的是**绑定事件监听器的元素（即事件代理的父容器）**，而不是真正触发事件的子元素。所以不能直接用 this 获取点击的目标元素 —— 这是初学者常有的误解。

用 event.target 获取真实触发元素

事件委托依赖事件冒泡，点击子元素后，事件会向上冒泡到父容器。此时应使用事件对象的 target 属性来获取原始触发点：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

event.target：始终指向**实际被点击的 DOM 元素**（哪怕它是子元素的子元素）
event.currentTarget：等价于 this，指向当前绑定监听器的那个元素（即代理容器）

注意 target 可能是文本节点或非目标元素

如果用户点在按钮内的文字、图标或空隙上，event.target 可能是 Text 节点、span 或其他嵌套元素。为稳妥起见，推荐用 closest() 向上查找符合选择器的第一个祖先（含自身）：

event.target.closest('.btn')：安全获取最近的匹配按钮元素
避免手动遍历 parentNode，也无需判断 nodeType
兼容性良好（IE 不支持，但现代项目基本可忽略）

示例：正确写法

假设给 #list 代理所有 .item 的点击：

document.getElementById('list').addEventListener('click', function (e) {
  const item = e.target.closest('.item');
  if (!item) return; // 点击区域不在 .item 内，忽略

  console.log('被点击的 item:', item); // ✅ 正确的目标元素
  console.log('this 指向:', this);      // ❌ 是 #list，不是 .item
  console.log('e.currentTarget:', e.currentTarget); // 等同于 this
});