WebExtension中EventTarget事件回调无法执行的原因

以下是几种最可能导致该问题的原因及验证/解决方式：

• 事件监听与触发的实例不匹配
  检查BarFoo中绑定监听的FooBar实例，是否和调用dispatchEvent的是同一个对象。如果是分别创建的独立实例，监听的对象没触发事件、触发事件的对象没绑定监听，自然不会执行回调。
  错误示例：

  class BarFoo {
    constructor() {
      // 创建实例A并绑定监听
      const fooBarA = new FooBar();
      fooBarA.addEventListener('executed', () => console.log('回调执行'));
    }
    trigger() {
      // 创建实例B并触发事件，和实例A无关
      const fooBarB = new FooBar();
      fooBarB.dispatchEvent(new CustomEvent('executed'));
    }
  }
  

• FooBar未正确继承EventTarget
  继承EventTarget时必须调用父类构造函数super()，否则EventTarget内部的事件处理机制无法初始化，即使调用dispatchEvent也无法触发监听。
  正确继承写法：

  class FooBar extends EventTarget {
    constructor() {
      super(); // 不可省略，否则事件系统失效
    }
    doExecute() {
      this.dispatchEvent(new CustomEvent('executed'));
    }
  }
  

• 事件名称拼写/大小写不匹配
  EventTarget的事件名称区分大小写，确认触发事件的名称（executed）和监听时使用的名称完全一致，比如误写为Executed或execute都会导致匹配失败。

• 监听添加时机晚于事件触发
  如果BarFoo是在FooBar实例已经触发executed事件之后才绑定监听，事件已经派发完毕，监听不会回溯执行回调。需要确保监听在事件触发前完成绑定。

• 事件对象配置问题
  虽然默认情况下CustomEvent是可冒泡、可取消的，但如果创建事件时错误配置了参数，也可能影响触发。可以显式配置参数验证：

  const event = new CustomEvent('executed', { bubbles: true, cancelable: true });
  this.dispatchEvent(event);
  // 打印event.defaultPrevented可检查是否被意外取消
  console.log(event.defaultPrevented);
  

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