removeEventListener 失效主因是 bind 每次返回新函数引用，导致绑定与解绑函数不等；正确方式有三：保存 bound 引用、用箭头函数闭包、传含 handleEvent 的对象；推荐 AbortController 替代手动管理。
在 JavaScript 中，removeEventListener 失效的常见原因之一，就是给事件处理函数用了 bind，但解绑时没用**同一个函数引用**——而 bind 每次都返回一个新函数，导致“绑的是 A，删的是 B”，自然删不掉。
为什么 bind 后 removeEventListener 会失效
addEventListener 和 removeEventListener 是严格比对函数引用的（即 ===），不是比对函数逻辑或内容。而 fn.bind(obj, arg) 每次调用都会创建并返回一个全新的函数对象：
const handler = function() { console.log(this.value); };
const bound1 = handler.bind({ value: 1 });
const bound2 = handler.bind({ value: 1 });
console.log(bound1 === bound2); // false ← 关键！
所以如果你这样写：
btn.addEventListener('click', handler.bind(obj));
// ……后来想解绑：
btn.removeEventListener('click', handler.bind(obj)); // ❌ 失效！bound 是另一个新函数
正确解绑的 3 种实用方式
- 提前保存 bind 后的函数引用：只 bind 一次，存变量，绑定和解绑都用它
const boundHandler = handler.bind(obj);
btn.addEventListener('click', boundHandler);
// ……
btn.removeEventListener('click', boundHandler); // ✅ 成功
- 用箭头函数 + 闭包捕获 this（适合简单场景）：避免 bind，直接在定义时固化上下文
const obj = { value: 42 };
const handler = () => console.log(obj.value); // 箭头函数不绑定 this，靠外层闭包
btn.addEventListener('click', handler);
// ……
btn.removeEventListener('click', handler); // ✅ 同一引用
-
使用对象方法 + handleEvent（标准但少用）：让对象本身实现
handleEvent接口，this 自动是该对象，无需 bind
const obj = {
value: 99,
handleEvent(e) {
console.log(this.value); // this 就是 obj
}
};
btn.addEventListener('click', obj); // ✅ 传对象，浏览器自动调用 obj.handleEvent
// ……
btn.removeEventListener('click', obj); // ✅ 解绑也用同一对象引用
额外注意：匿名函数 + bind 一定失效
以下写法看似简洁，实则必然解绑失败：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
// ❌ 千万别这么写
btn.addEventListener('click', function() { ... }.bind(obj));
btn.removeEventListener('click', function() { ... }.bind(obj)); // 两个匿名函数 + 两次 bind → 两个不同函数
即使函数体一模一样，每次 function(){} 都是新函数，再加 bind 就是双重“失联”。
现代替代方案：用 AbortController（推荐用于一次性/可控生命周期）
如果你只是想“在某个时机取消监听”，不必手动管理 add/remove，可用 AbortSignal：
const controller = new AbortController();
btn.addEventListener('click', () => { ... }, { signal: controller.signal });
// 后来想停掉：
controller.abort(); // ✅ 自动移除所有带该 signal 的监听器
这种方式不依赖函数引用匹配，更健壮，尤其适合组件卸载、异步清理等场景。
