箭头函数不能直接作为事件监听器回调同时接收事件对象和自定义参数，需通过闭包（推荐）、dataset属性或普通函数实现；闭包可自然访问外部变量并接收event，dataset适合静态参数，bind不适用于箭头函数。
箭头函数本身不能直接作为事件监听器回调并自动接收事件对象，同时又传入自定义参数——因为 addEventListener 只会把原生事件对象作为第一个参数传给回调。想“既拿到 event，又传额外参数”，得靠闭包或绑定技巧，而不是让箭头函数“多参数接收”。
用闭包包裹箭头函数（推荐）
在添加监听器时，立即执行一个函数，返回一个箭头函数，这个箭头函数能访问外层作用域的变量，同时还能接收 event 参数：
- 适合需要动态传参（如 id、索引、配置项）且不希望提前绑定 this 的场景
- event 对象仍由浏览器自动传入，无需手动传递
- 避免了
bind可能带来的 this 混淆（箭头函数本就不绑定 this，但闭包更清晰）
示例：
const btn = document.getElementById('myBtn');
const userId = 123;
btn.addEventListener('click', () => {
// 这里可直接使用 userId，event 也会被自动传入
handleClick(userId, event); // event 是浏览器传进来的
});
function handleClick(id, e) {
console.log('用户ID:', id, '触发事件:', e.type);
}
把参数塞进元素 dataset 或属性里
如果参数是静态或可序列化的（如字符串、数字），直接存在 DOM 元素上，回调里取出来即可，干净且无闭包内存顾虑：
立即学习“Java免费学习笔记（深入）”；
- 适用于列表项、按钮组等批量绑定场景
- 避免重复创建函数，利于性能和垃圾回收
- event.currentTarget 比 this 更可靠（尤其箭头函数中 this 不指向元素）
示例：
<button data-user-id="456">编辑用户</button>
const btn = document.querySelector('button');
btn.addEventListener('click', (e) => {
const userId = e.currentTarget.dataset.userId;
console.log('操作用户:', userId);
});
慎用 bind（箭头函数 + bind 不兼容）
注意：箭头函数没有自己的 this，也不能被 bind 改变 this 或预设参数。下面写法无效：
// ❌ 错误：箭头函数 ignore bind 的参数
btn.addEventListener('click', ((id, e) => {
console.log(id, e);
}).bind(null, 789)); // bind 不起作用，id 不会被传入
若坚持用 bind，应改用普通函数：
// ✅ 正确（但失去箭头函数的 this 优势）
btn.addEventListener('click', function(id, e) {
console.log(id, e);
}.bind(null, 789));
不过此时 this 指向被改写，且 event 参数位置错乱（实际 event 会变成第二个参数），容易出错，不建议。
需要 this 指向元素？用普通函数更直白
箭头函数的 this 继承自外层作用域，无法指向触发事件的元素。如果你依赖 this 访问 DOM 元素（比如 this.textContent），普通函数更合适：
btn.addEventListener('click', function(e) {
console.log(this === e.currentTarget); // true
console.log(this.textContent);
});
若非必要，优先用 e.currentTarget 替代 this，这样箭头函数也能安全使用。
