JavaScript 中事件监听器中怎么通过 this 获取触发的元素-js教程-PHP中文网

在javascript事件监听器中，this默认指向绑定监听器的元素（即event.currenttarget），而非触发事件的目标元素；应使用event.target获取真正被点击的元素，event.currenttarget或this获取监听器绑定的宿主元素，箭头函数中需改用e.currenttarget。

javascript 中事件监听器中怎么通过 this 获取触发的元素

在 JavaScript 事件监听器中，this 默认指向**绑定事件监听器的那个元素**（即 addEventListener 的调用对象），而不是触发事件的实际目标元素。要获取真正被点击/触发的元素，应使用事件对象的 currentTarget 或 target 属性，而非依赖 this —— 尤其在事件委托或父子嵌套场景下，this 和 target 很可能不同。

区分 this、event.target 和 event.currentTarget

this：等于 event.currentTarget，即当前正在执行监听器的元素（通常是绑定监听器的那个 DOM 节点）。
event.target：真正触发事件的最深子元素（比如你点了一个按钮内的图标，target 是图标，不是按钮）。
event.currentTarget：监听器实际附加到的元素（和 this 值一致）。

例如：

<div id="box">
  <button><i>点击我</i></button>
</div>

若给 #box 添加点击监听器：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

点击 <i></i> 标签 → event.target 是 <i></i>，this（即 event.currentTarget）是 <div id="box"> <li>此时 <code>this !== event.target，直接用 this 无法拿到被点击的图标

想获取“真正被点击的元素”，优先用 event.target

这是最常用、最可靠的方案，尤其适合事件委托：

监听父容器，响应子元素点击时，用 event.target 拿到具体被点的子节点
可配合 closest() 进行语义化匹配（如 event.target.closest('button')）
示例：

document.getElementById('list').addEventListener('click', function(e) {
  const btn = e.target.closest('button'); // 安全获取按钮（即使点在按钮内 span 上）
  if (btn) {
    console.log('点击了按钮：', btn);
  }
});

想确保拿到绑定监听器的元素，可以用 this 或 event.currentTarget

当你明确需要监听器所挂载的宿主元素（比如统一处理容器样式、禁用整个区域），this 是安全的：

它不会随点击位置变化，始终等于绑定监听器的元素
等价写法：event.currentTarget，语义更清晰，推荐在复杂逻辑中显式使用
示例：

const container = document.querySelector('.card');
container.addEventListener('click', function(e) {
  // 无论点哪，都给整个 card 加 class
  this.classList.add('active');        // ✅ 正确：this 指向 .card
  // e.currentTarget.classList.add('active'); // 效果相同，更明确
});