JavaScript 怎么在事件监听器中正确绑定和解绑带 this 的函数-js教程-PHP中文网

正确解绑事件监听器的关键是add与remove使用同一函数引用；匿名函数和箭头函数因每次新建实例而无法解绑；推荐bind后保存引用、class字段语法或handleevent接口。

javascript 怎么在事件监听器中正确绑定和解绑带 this 的函数

在事件监听器中正确处理 this 绑定，关键不是“先绑定再解绑”，而是确保绑定方式与解绑方式完全一致——即：用什么函数加的监听器，就必须用同一个函数去移除。

问题根源：匿名函数和箭头函数无法解绑

以下写法看似方便，但无法解绑：

button.addEventListener('click', function() {
  this.classList.add('active'); // this 指向 button
});
// ❌ 无法解绑：传入的是全新匿名函数，内存地址不同
button.removeEventListener('click', function() { ... });

箭头函数同理，每次声明都是新函数实例，且不绑定 this（继承外层作用域），不适合需要动态 this 的 DOM 操作场景。

推荐方案一：使用 bind() 并保存引用

显式绑定 this，同时保留函数引用以便后续解绑：

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 中分别调用。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

推荐方案二：使用 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 指向该对象，无需额外绑定，兼容性好，但略显隐晦。

核心就一条：解绑的前提是传入和添加时完全相同的函数引用。选哪种方式取决于你的环境约束和代码风格偏好。