DOM事件监听器中不推荐用箭头函数，因其不绑定自身this而继承外层作用域this（如window或undefined），无法直接访问触发元素；应改用普通函数或通过event.currentTarget获取目标元素。
箭头函数在事件监听器中不会绑定自己的 this，而是继承外层作用域的 this 值——这既是它的特点，也是容易出错的关键点。
箭头函数没有独立的 this 绑定
普通函数作为事件监听器时，浏览器会把触发事件的元素（如 button）作为 this 传入；而箭头函数不创建自己的执行上下文，它直接沿用定义时所在作用域的 this。
- 如果箭头函数写在全局作用域，this 指向
window（非严格模式）或undefined（严格模式） - 如果写在某个对象方法内部，this 就是该对象（前提是该方法的 this 本身被正确绑定）
- 它永远不会被事件触发机制动态修改为事件目标元素
常见错误场景：想访问 event.target 但误用 this
比如想点击按钮后修改自身样式：
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
this.style.backgroundColor = 'red'; // ❌ this 不是 btn，很可能是 window 或 undefined
});
正确做法是使用事件对象的 currentTarget 或 target：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
event.currentTarget等价于监听器绑定的元素（即btn） -
event.target是实际触发事件的元素（可能为子元素）
改写示例：
btn.addEventListener('click', (e) => {
e.currentTarget.style.backgroundColor = 'red'; // ✅ 安全可靠
});
何时适合用箭头函数写事件监听器
当需要在回调中访问外层的 this（比如类实例、闭包变量），且不需要把事件源当作 this 时，箭头函数反而更安全。
- 类组件中保持对实例的引用：
class App { handleClick = () => { console.log(this.state); } } - 闭包中捕获变量：
const id = 123; el.addEventListener('click', () => fetch(`/api/${id}`)); - 避免手动 bind：
el.addEventListener('click', this.handleClick.bind(this))可替换为this.handleClick = () => { ... }
替代方案与兼容性提醒
如果确实需要传统函数的 this 行为，就别用箭头函数。可选方式包括：
- 使用普通函数并确保调用上下文正确（如通过
bind、对象方法调用） - 用
event对象代替 this 访问 DOM 元素（推荐，语义更清晰） - ES6+ 中也可用解构获取
currentTarget：el.addEventListener('click', ({ currentTarget }) => currentTarget.remove())
注意：箭头函数不能用作构造函数，也不能使用 arguments 或 yield，这些限制在事件处理中虽不常涉及，但需心里有数。
