在事件监听器回调中，this默认指向触发事件的DOM元素，但仅限于传统函数声明；箭头函数不绑定this，需用event.currentTarget或显式bind绑定。
在事件监听器回调中，this 默认指向触发事件的 DOM 元素——但**仅限于使用传统函数声明（function）作为回调时**。箭头函数不绑定自己的 this，会继承外层作用域的值，通常不是目标元素。
✅ 正确方式：用普通函数（推荐）
这是最直接、最符合直觉的做法：
- 浏览器自动将
this绑定为当前事件的目标元素（即event.target，多数情况下等同于event.currentTarget） - 适用于
addEventListener和 HTML 内联事件（如onclick="handler()"）
button.addEventListener('click', function() {
console.log(this); // <button> 元素本身
console.log(this.textContent); // 可直接读取属性
});
⚠️ 常见陷阱：箭头函数导致 this 失效
箭头函数没有自己的 this，它沿作用域链向上找，往往指向全局对象（非严格模式下是 window）或模块顶层的 this（严格模式下是 undefined）：
button.addEventListener('click', () => {
console.log(this); // window 或 undefined，不是 button！
});
如果非要写成箭头函数，必须显式使用 event.target 或 event.currentTarget：
立即学习“Java免费学习笔记（深入）”；
button.addEventListener('click', (e) => {
console.log(e.currentTarget); // ✅ 明确拿到触发监听器的元素（即 button）
console.log(e.target); // ⚠️ 注意：可能为子元素（如点击 button 内的 span）
});
? 进阶控制：显式绑定 this（bind / call / apply）
当需要把回调函数复用或提前定义时，可用 bind 固定 this：
-
handler.bind(element)：返回一个新函数，this永远是element - 适合封装可复用逻辑，比如统一处理多个按钮
function handleClick() {
console.log('Clicked:', this.id);
}
button1.addEventListener('click', handleClick.bind(button1)); // this → button1
button2.addEventListener('click', handleClick.bind(button2)); // this → button2
? 补充说明：currentTarget vs target
两者都常被误认为等价，但有关键区别：
-
event.currentTarget：始终是当前绑定事件监听器的那个元素（即你调用addEventListener的对象） -
event.target：实际触发事件的最深嵌套元素（可能为子元素）
例如点击 <button><span>OK</span></button> 中的 span：
→ event.target 是 <span>，
→ event.currentTarget 是 <button>（只要你监听的是 button）。
