如何移除JavaScript中绑定this的事件监听器？

你遇到的问题核心在于函数引用不匹配，下面拆解原因和可行的解决办法：

为什么之前的移除方式无效？ #

• 每次调用bind()都会生成一个全新的函数实例，你绑定监听器时用的是this._handlePlay.bind(this)，移除时再调用一次bind得到的是另一个完全不同的函数，自然找不到要移除的目标。
• this._handlePlay()是直接执行函数，把执行后的返回值（这里是undefined）传给了removeEventListener，根本不是你绑定的那个函数引用，肯定移除失败。

可行解决方案 #

方案1：提前保存绑定后的函数引用

在组件初始化阶段（比如构造函数），把绑定好this的函数存为实例属性，后续绑定和移除都用这个固定引用：

class YourComponent extends HTMLElement {
  constructor() {
    super();
    // 提前绑定并保存引用，后续全程用这个变量
    this.boundHandlePlay = this._handlePlay.bind(this);
  }

  connectedCallback() {
    this.overlay.addEventListener('click', this.boundHandlePlay);
  }

  disconnectedCallback() {
    this.overlay.removeEventListener('click', this.boundHandlePlay);
  }

  _handlePlay() {
    this._isOpen = !this._isOpen;
  }
}

方案2：用箭头函数类字段绑定this

利用箭头函数自动绑定当前上下文的特性，直接把_handlePlay定义为箭头函数类字段，这样它的this始终指向组件实例，绑定和移除时直接用this._handlePlay即可：

class YourComponent extends HTMLElement {
  _isOpen = false;
  // 箭头函数自动绑定组件实例的this
  _handlePlay = () => {
    this._isOpen = !this._isOpen;
  };

  connectedCallback() {
    this.overlay.addEventListener('click', this._handlePlay);
  }

  disconnectedCallback() {
    this.overlay.removeEventListener('click', this._handlePlay);
  }
}

注：类字段语法需要环境支持ES6+，如果兼容旧环境可以用Babel转译。

方案3：事件委托（适合特定场景）

如果业务场景允许，可将监听器绑定到组件本身，通过判断点击目标是否为overlay来处理逻辑，这样不需要单独移除子元素的监听器：

class YourComponent extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', (e) => {
      if (e.target === this.overlay) {
        this._handlePlay();
      }
    });
  }

  _handlePlay() {
    this._isOpen = !this._isOpen;
  }
}

组件销毁时，移除绑定在自身的监听器即可，或者组件被移除时浏览器会自动清理相关监听器。

内容的提问来源于stack exchange，提问作者Pharmann Pharmanson