匿名函数无法被正常解绑，因为addEventListener和removeEventListener要求回调函数是同一引用，而每次声明匿名函数都会创建新对象；可行方案包括具名函数变量、AbortController（推荐）和事件委托。
匿名函数在事件监听器中用起来方便，但想解绑就麻烦了——因为没名字，removeEventListener 找不到它。
为什么匿名函数无法被正常解绑
JavaScript 要求 addEventListener 和 removeEventListener 的第二个参数（回调函数）必须是同一个函数引用。而每次写 () => {...} 或 function() {...}，都会创建一个全新的函数对象，即使内容一模一样，它们在内存里也是不同的。
例如：
btn.addEventListener('click', () => console.log('hello'));
btn.removeEventListener('click', () => console.log('hello')); // ❌ 不生效
第二行的箭头函数是另一个新函数，跟第一行那个不是同一个，所以解绑失败。
立即学习“Java免费学习笔记（深入）”；
可行的解绑方案
- 用具名函数变量：把函数先赋值给变量，添加和移除都用这个变量。
-
使用 AbortController（现代推荐）：通过 signal 绑定监听器，调用
abort()即可批量清理。 -
用事件委托 + 事件捕获/冒泡控制：不在目标元素上直接绑定，而是在父级监听，靠
event.target判断，解绑只需操作父级监听器一次。
AbortController 是最干净的解法
ES2021 起，addEventListener 支持 { signal } 选项：
const controller = new AbortController();
btn.addEventListener('click', () => console.log('clicked'), { signal: controller.signal });
// 后续任意时刻
controller.abort(); // ✅ 立即移除该监听器
优势明显：不用保存函数引用、支持多次绑定同一函数、可集中管理、还能配合 Promise 使用。
额外提醒：bind 和箭头函数也会制造新引用
下面这些写法同样会导致解绑失效：
// ❌ 每次 bind 都返回新函数
btn.addEventListener('click', handler.bind(this));
btn.removeEventListener('click', handler.bind(this));
// ❌ 箭头函数内联，仍是新函数
list.forEach(item => {
item.addEventListener('click', () => handleClick(item.id));
});
如果必须动态传参，建议改用 data 属性 + 事件委托，或提前绑定好并缓存函数引用。
