时间戳

首页 > 解决方案 > 为什么窗口调度的事件没有被其他元素捕获？

javascript - 为什么窗口调度的事件没有被其他元素捕获？

问题描述

  <body>
    <div id="d"></div>
    <script>
      document
        .getElementById("d")
        .addEventListener("test", () => console.log("div"), true);

      document.body.addEventListener("test", () => console.log("body"), true);

      window.addEventListener("test", () => console.log("window"));

      window.dispatchEvent(new CustomEvent("test"));
    </script>
  </body>

如果你运行上面的代码，你只会看到一个输出。

标签： javascripthtmlweb

解决方案

我知道了！

因为无论是冒泡还是捕获，事件传播路径都只能是从触发节点到顶层，而window本身已经是顶层，所以根本没有传播路径，更别说被其他节点捕获了.

所以如果事件是由 div 触发的，那么 window 和 body 都可以被捕获：

  <body>
    <div id="d"></div>
    <script>
      const d = document.getElementById("d");

      d.addEventListener("test", () => console.log("div"));

      document.body.addEventListener("test", () => console.log("body"), true);

      window.addEventListener("test", () => console.log("window"), true);

      d.dispatchEvent(new CustomEvent("test"));
    </script>
  </body>

推荐阅读