在JavaScript事件监听中，this指向触发事件的DOM元素，但箭头函数无this绑定、类方法需手动绑定，推荐使用event.currentTarget替代this获取绑定元素。
在 JavaScript 事件监听函数中，this 的值取决于函数的调用方式，而不是定义方式。默认情况下，事件处理函数作为 DOM 元素的方法被调用，因此 this 指向触发事件的 DOM 元素（即当前元素），但这一行为在使用箭头函数、普通函数绑定或类方法时会发生变化。
普通函数作为事件监听器时 this 指向触发元素
当你用 addEventListener 添加一个普通函数（非箭头函数）作为监听器时，浏览器会以该 DOM 元素为上下文调用它，所以 this 就是那个元素：
-
✅ 正确示例：
button.addEventListener('click', function() { console.log(this); }); // this 是 button 元素 -
⚠️ 注意：如果这个函数被提前赋值给变量再传入，就可能丢失 this 绑定（比如
const handler = function() { ... }; btn.addEventListener('click', handler)仍保持原样，但若中间经过 call/apply/bind 或解构赋值就可能出问题）
箭头函数中 this 不绑定 DOM 元素
箭头函数没有自己的 this，它会沿作用域链向上查找外层函数的 this（通常是全局对象或 undefined，严格模式下）：
-
❌ 错误预期：
button.addEventListener('click', () => { console.log(this); }); // this 不是 button，而是外层作用域的 this -
? 替代方案：需要用
event.target或event.currentTarget获取元素：button.addEventListener('click', (e) => { console.log(e.currentTarget); })
类方法中 this 默认丢失，需手动绑定
在 ES6 类中定义的方法作为事件监听器时，如果不处理，this 会指向调用时的上下文（通常是 DOM 元素），而非类实例：
立即学习“Java免费学习笔记（深入）”；
-
❌ 常见陷阱：
class MyComponent { handleClick() { console.log(this); } }<br>const comp = new MyComponent();<br>btn.addEventListener('click', comp.handleClick); // this 指向 btn，不是 comp -
✅ 解决办法（任选其一）：
• 使用bind：btn.addEventListener('click', comp.handleClick.bind(comp));
• 使用箭头函数属性（推荐）：handleClick = () => { console.log(this); }
• 在事件回调中显式调用：btn.addEventListener('click', () => comp.handleClick());
用 event 对象更可靠地获取目标元素
比起依赖 this，推荐统一使用事件对象的 event.target 或 event.currentTarget：
-
event.target：实际触发事件的元素（可能为子元素） -
event.currentTarget：监听器绑定所在的元素（等价于传统 this） - 二者在事件冒泡中可能不同，但
currentTarget更接近你期望的“监听器所在元素”
