正确解绑事件监听器的关键是add与remove使用同一函数引用；匿名函数和箭头函数因每次新建实例而无法解绑；推荐bind后保存引用、class字段语法或handleEvent接口。
在事件监听器中正确处理 this 绑定，关键不是“先绑定再解绑”，而是确保绑定方式与解绑方式完全一致——即：用什么函数加的监听器，就必须用同一个函数去移除。
问题根源：匿名函数和箭头函数无法解绑
以下写法看似方便，但无法解绑：
button.addEventListener('click', function() {
this.classList.add('active'); // this 指向 button
});
// ❌ 无法解绑：传入的是全新匿名函数，内存地址不同
button.removeEventListener('click', function() { ... });
箭头函数同理，每次声明都是新函数实例，且不绑定 this（继承外层作用域），不适合需要动态 this 的 DOM 操作场景。
推荐方案一：使用 bind() 并保存引用
显式绑定 this，同时保留函数引用以便后续解绑：
立即学习“Java免费学习笔记（深入）”；
class Handler {
constructor(el) {
this.el = el;
// ✅ 保存绑定后的函数引用
this.handleClick = this.handleClick.bind(this);
el.addEventListener('click', this.handleClick);
}
handleClick() {
console.log(this.el); // 正确指向实例
}
destroy() {
this.el.removeEventListener('click', this.handleClick);
}
}
注意：bind() 返回新函数，必须提前保存，不能在 addEventListener 和 removeEventListener 中分别调用。
推荐方案二：使用 class 字段语法（ES2022+）
更简洁，自动绑定，适合现代环境：
class Handler {
constructor(el) {
this.el = el;
el.addEventListener('click', this.handleClick);
}
// ✅ 字段语法自动绑定 this，生成唯一函数实例
handleClick = () => {
console.log(this.el);
};
destroy() {
this.el.removeEventListener('click', this.handleClick);
}
}
本质是将箭头函数赋值给实例属性，只创建一次，可安全解绑。
不推荐但可行：使用 handleEvent 接口
让对象本身实现事件处理器接口，避免额外绑定：
const handler = {
el: button,
handleEvent(event) {
if (event.type === 'click') {
this.el.classList.toggle('active');
}
}
};
button.addEventListener('click', handler);
// ✅ 解绑时传入同一对象
button.removeEventListener('click', handler);
要求对象有 handleEvent 方法，this 指向该对象，无需额外绑定，兼容性好，但略显隐晦。
核心就一条：解绑的前提是传入和添加时完全相同的函数引用。选哪种方式取决于你的环境约束和代码风格偏好。
