JavaScript中window自定义事件监听器无法成功移除问题求助

问题定位结果 #

报错的核心原因是注册和移除事件监听器时传入的函数引用不一致：

• 调用 Function.prototype.bind() 会生成一个全新的函数实例，你在 constructor 中注册事件时传入的是 bind 生成的临时函数，没有将该实例保存下来
• 调用 removeEventListener 时传入的是原始未绑定的 this.navigateToPage 方法，和注册时的函数引用完全不匹配，浏览器无法找到对应监听器，因此抛出“Event registry returned null”的错误。

修复方案 #

方案一：提前存储绑定后的函数实例 #

在构造阶段就把绑定好this的函数存为当前实例的属性，注册、移除时都使用同一个存储的引用：

constructor(context) {
  // 存储绑定后的函数实例
  this._navigateToPageHandler = this.navigateToPage.bind(this);
  this._navigateToUserPageHandler = this.navigateToUserPage.bind(this);
  // 注册时使用存储的函数
  window.addEventListener('PageButtonEvent', this._navigateToPageHandler, false);
  window.addEventListener('PageUserButtonEvent', this._navigateToUserPageHandler, false);
}

removeWindowEvents() {
  // 移除时使用同一个存储的函数
  window.removeEventListener('PageButtonEvent', this._navigateToPageHandler, false);
  window.removeEventListener('PageUserButtonEvent', this._navigateToUserPageHandler, false);
}

方案二：使用类箭头函数自动绑定this（适配ES6+环境） #

直接将类方法定义为箭头函数，天然绑定当前实例的this，无需额外调用bind：

// 类内部定义方法为箭头函数
navigateToPage = () => {
  // 原有业务逻辑不变
}

navigateToUserPage = () => {
  // 原有业务逻辑不变
}

constructor(context) {
  window.addEventListener('PageButtonEvent', this.navigateToPage, false);
  window.addEventListener('PageUserButtonEvent', this.navigateToUserPage, false);
}

removeWindowEvents() {
  window.removeEventListener('PageButtonEvent', this.navigateToPage, false);
  window.removeEventListener('PageUserButtonEvent', this.navigateToUserPage, false);
}

内容的提问来源于stack exchange，提问作者Sudhanshu Gupta