在 addeventlistener 中，this 默认指向绑定事件的 dom 元素。这是浏览器将事件对象作为回调函数的第一个参数时，自动将函数内部的 this 绑定到触发该事件的元素上的机制。
普通函数与箭头函数的 this 差异是什么
使用普通函数时，this 指向 DOM 元素；而使用箭头函数时，this 继承自定义时的外层作用域，通常不指向 DOM 元素。若需让箭头函数也能操作当前元素，应使用事件对象的 currentTarget 属性。
<button id="btn">Click</button>
// 普通函数：this 指向 #btn
document.getElementById('btn').addEventListener('click', function() {
console.log(this.id); // "btn"
});
// 箭头函数：this 继承外层（通常是 window 或 undefined）
document.getElementById('btn').addEventListener('click', () => {
console.log(this.id); // undefined (假设在全局作用域)
console.log(event.currentTarget.id); // "btn"
});
预期结果：第一段代码打印 "btn"，第二段代码打印 undefined 和 "btn"。
如何手动改变 addEventListener 中的 this 指向
可以通过 bind() 方法显式指定 this 的值，或者使用 call() / apply() 在调用时指定。但更常见的做法是在回调内部通过 event.currentTarget 获取当前元素，从而避免依赖 this 的绑定行为。
<button id="btn">Click</button>
const obj = { name: 'MyObject' };
// 使用 bind 强制 this 指向 obj
document.getElementById('btn').addEventListener('click', function() {
console.log(this.name); // "MyObject"
}.bind(obj));
// 使用 event.currentTarget 获取 DOM 元素
document.getElementById('btn').addEventListener('click', (event) => {
console.log(event.currentTarget.id); // "btn"
});
预期结果：第一段代码打印 "MyObject"，第二段代码打印 "btn"。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
