在DOM事件回调中，this默认指向触发事件的DOM元素，但箭头函数不绑定this而继承外层作用域，类方法需显式绑定或使用event.currentTarget确保正确访问目标元素。
在 DOM 事件回调中，this 的值取决于函数的调用方式，而不是定义位置。默认情况下，事件处理函数中的 this 指向触发事件的 DOM 元素（即事件目标），但容易因绑定方式不当而丢失——尤其在使用箭头函数、显式绑定或类方法时。
原生事件监听器中 this 默认指向事件目标
直接用 addEventListener 绑定时，普通函数的 this 自动绑定为当前触发事件的元素：
button.addEventListener('click', function() {
console.log(this); // ✅ 是 button 元素
});
这是浏览器的默认行为，无需额外操作。
避免用箭头函数作为事件回调
箭头函数不绑定自己的 this，它会继承外层作用域的 this（通常是 window 或 undefined）：
立即学习“Java免费学习笔记（深入）”；
button.addEventListener('click', () => {
console.log(this); // ❌ 不是 button，而是外层 this
});
如果需要访问触发元素，改用 event.target 或 event.currentTarget：
-
event.target：真正触发事件的底层元素（可能为子元素） -
event.currentTarget：绑定事件监听器的元素（等价于传统this）
类方法中正确绑定 this
在类中定义事件处理方法时，若直接传入 addEventListener，this 会丢失：
class MyComponent {
handleClick() {
console.log(this); // ❌ undefined（严格模式）或 window
}
init() {
button.addEventListener('click', this.handleClick); // 未绑定
}
}
解决方式有三种：
- 在构造函数中绑定：
this.handleClick = this.handleClick.bind(this) - 使用类字段语法（ES2022+）：
handleClick = () => { ... } - 在监听时内联绑定：
button.addEventListener('click', (e) => this.handleClick(e))（注意性能，每次创建新函数）
使用 event.currentTarget 更可靠
无论回调如何绑定，event.currentTarget 始终等于绑定监听器的元素，比依赖 this 更稳定：
button.addEventListener('click', function(e) {
console.log(this === e.currentTarget); // ✅ true
});
// 即使是箭头函数 + event.currentTarget 也安全：
button.addEventListener('click', (e) => {
console.log(e.currentTarget); // ✅ 总是 button
});
推荐在复杂上下文中优先使用 e.currentTarget，避免 this 绑定陷阱。
