如何让window与事件派发元素间的节点监听自定义冒泡事件？

• 问题根源
  你的代码存在两个关键错误：

  1. bubbles: true的位置错误：它是Event构造函数的配置项，不能放在dispatchEvent的参数里。
  2. 事件派发对象错误：你在document上触发事件，事件的传播路径只有document → window，你要监听的中间元素不在这条路径上，所以即使开启冒泡也接收不到事件。

• 推荐的正确实现
  既然你的结构是window > 监听器元素 > 事件派发元素（派发元素是监听器的子元素），应该在派发元素本身触发事件，这样事件会向上冒泡到父级的监听器元素：

  修改后的事件派发代码：

  // 此处this指代事件派发元素（监听器元素的子元素）
  let toggleClicked = new Event("generic-toggle-clicked", {
    detail: { isActive: this.isActive },
    bubbles: true // 正确配置在Event构造参数中
  });
  this.dispatchEvent(toggleClicked); // 在派发元素上触发事件
  

  监听代码保持不变即可：

  // this指代目标监听元素
  this.addEventListener("generic-toggle-clicked", function () {
    console.log(this);
  });
  

• 特殊场景处理：必须在document上派发事件
  如果因需求限制必须在document上触发事件，可开启事件捕获模式，让中间元素在事件向下传播的阶段接收到事件，只需给addEventListener添加第三个参数true：

  this.addEventListener("generic-toggle-clicked", function () {
    console.log(this);
  }, true); // 开启捕获模式
  

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