JavaScript 中怎么在事件监听器中正确获取当前元素的 this-js教程-PHP中文网

在javascript事件监听器中，this的指向取决于绑定方式，推荐始终使用event.currenttarget获取绑定监听器的元素，用event.target获取实际触发事件的最深子元素。

javascript 中怎么在事件监听器中正确获取当前元素的 this

在 JavaScript 事件监听器中，this 的指向取决于**如何绑定监听器**，而不是“当前触发事件的元素”本身。默认情况下，普通函数作为事件处理函数时，this 指向触发事件的元素（即 event.target 或 event.currentTarget），但一旦使用箭头函数、显式绑定（bind）、或在类方法中未正确绑定，this 就容易丢失或指向错误对象。

✅ 正确获取当前触发元素（event.currentTarget）

最可靠、推荐的方式是直接使用事件对象的 currentTarget 属性 —— 它始终指向**当前绑定事件监听器的那个元素**（即你调用 addEventListener 的那个 DOM 节点）：

button.addEventListener('click', function(event) {
  console.log(this === event.currentTarget); // true
  console.log(event.currentTarget); // 就是 button 元素
});

注意：event.target 是实际被点击的**最深子元素**（可能为子节点），而 event.currentTarget 才是你想要的“当前监听器所在的元素”。

⚠️ 箭头函数中 this 不指向元素

箭头函数不绑定自己的 this，它继承外层作用域的 this（通常是 window 或 undefined（严格模式））：

button.addEventListener('click', (event) => {
  console.log(this); // ❌ 不是 button，很可能是 window 或 undefined
  console.log(event.currentTarget); // ✅ 仍可用，推荐替代方案
});

所以：**不要依赖箭头函数里的 this 来获取 DOM 元素**；改用 event.currentTarget。

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

? 类方法中正确绑定 this

在 ES6 class 中，方法默认不自动绑定 this，直接传入会丢失上下文：

class MyComponent {
  handleClick() {
    console.log(this); // ❌ 可能是 undefined（严格模式）或 button？不保证！
  }
  init() {
    button.addEventListener('click', this.handleClick); // this 丢失
  }
}

解决方式有三种（按推荐顺序）：

使用箭头函数属性（ES2022+ 推荐）：
handleClick = () => { console.log(this); } —— this 指向实例，但依然不能用于获取 DOM 元素（需配合 event.currentTarget）
在 addEventListener 中 bind(this)：
button.addEventListener('click', this.handleClick.bind(this));
在事件处理器内直接用 event.currentTarget（最简洁通用）：
handleClick(event) { const el = event.currentTarget; }