JavaScript 中 this 绑定怎么在 DOM2 级事件监听绑定中保持指向元素-js教程-PHP中文网

dom2级事件中this默认指向绑定元素；箭头函数会丢失该绑定，应改用event.currenttarget或普通函数；event.target指向触发事件的子元素，currenttarget始终指向绑定元素。

javascript 中 this 绑定怎么在 dom2 级事件监听绑定中保持指向元素

在 DOM2 级事件监听（addEventListener）中，回调函数内的 this 默认指向绑定事件的 DOM 元素——这是浏览器的默认行为，**无需额外操作即可保持指向元素**。但容易出问题的地方在于：你用了箭头函数、或手动改变了回调上下文（比如用 bind、call、对象方法直接传入），反而会破坏这个默认绑定。

✅ 默认情况下 this 就是指向目标元素

使用普通函数作为回调时，浏览器自动把事件监听器所在的元素赋给 this：

const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
  console.log(this === btn); // true
  console.log(this.id);      // 'myBtn'
});

❌ 箭头函数会丢失 this 绑定

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

Gradle 9.8.0

下载

btn.addEventListener('click', () => {
  console.log(this === btn); // false（通常是 window）
});

如果需要访问元素，改用 event.target 或 event.currentTarget
event.currentTarget 等价于默认的 this（即绑定事件的那个元素）
event.target 是实际触发事件的元素（可能为子元素）

✅ 显式绑定 this 的几种安全方式

若需在回调中保持 this 指向元素，又想用其他写法，可选以下方式：

用 function() {}（推荐，默认就对）
用 event.currentTarget（最稳妥，无论什么函数类型都可用）
用 bind(btn) 显式绑定（不必要，但可行）：
btn.addEventListener('click', handler.bind(btn));
用闭包保存引用：
btn.addEventListener('click', function() { handler(btn); });