Video.js中为TextTrack添加cuechange事件监听后无法移除如何解决

问题根因 #

当前移除事件失败的核心原因是事件处理函数的引用不统一：
handleCueChange是定义在onHiliteSpeech方法内部的局部函数，每次调用onHiliteSpeech都会生成一个全新的函数实例。绑定事件时传入的是当次调用生成的函数引用，移除事件时传入的是另一次调用新生成的函数，两个引用不匹配，原生removeEventListener自然无法识别并移除之前绑定的处理函数。

修复方案 #

将事件处理函数挂载到组件实例上，保证绑定和移除时使用的是同一个引用，示例修改如下：

// 类属性声明阶段直接定义处理函数，保证全局唯一引用
handleCueChange = () => {
  // 原有事件处理逻辑保留在这里
  console.log('in event handler');
}

onHiliteSpeech() {
  const textTrack = this.videojsComponent.getTextTrack();

  if (this.bevents) {
    // 绑定前先执行一次移除，避免重复绑定同一事件
    textTrack.removeEventListener('cuechange', this.handleCueChange);
    textTrack.addEventListener('cuechange', this.handleCueChange);
  } else {
    // 移除时直接传入实例上存储的唯一引用
    textTrack.removeEventListener('cuechange', this.handleCueChange);
  }
}

补充说明 #

如果你使用的是Video.js封装的事件API而非原生DOM事件API，需要对应使用Video.js提供的on()/off()方法配对操作，否则会出现移除失败的问题：

// 绑定事件用Video.js提供的on方法
textTrack.on('cuechange', this.handleCueChange);
// 移除事件用对应off方法
textTrack.off('cuechange', this.handleCueChange);

你之前尝试的removeAllListeners属于Video.js的内置API，仅能移除通过Video.json方法绑定的事件，无法移除原生addEventListener绑定的事件，需要和绑定API配对使用才能生效。

内容的提问来源于stack exchange，提问作者John Pankowicz