Javascript 事件侦听器捕获和冒泡阶段事件_Javascript_Events_Dom

Javascript 事件侦听器捕获和冒泡阶段事件

javascript events dom

Javascript 事件侦听器捕获和冒泡阶段事件,javascript,events,dom,Javascript,Events,Dom,在阅读了许多教程和帖子之后，我有一段时间一直在思考这个问题，因此，没有人能够给我通过这个模块所需的心智模型以下是一篇关于浏览器事件的文章的摘录：当我们单击锚定标记时，DOM计算捕获阶段路径，触发根文档、主体、div和锚定标记的捕获阶段事件处理程序的all（按该顺序），然后它转身并按捕获阶段的相反顺序触发气泡阶段事件处理程序的all 以下是引用中描述的代码片段： <html> <head> </head> <body> <

在阅读了许多教程和帖子之后，我有一段时间一直在思考这个问题，因此，没有人能够给我通过这个模块所需的心智模型

以下是一篇关于浏览器事件的文章的摘录：

当我们单击锚定标记时，DOM计算捕获阶段路径，触发根文档、主体、div和锚定标记的捕获阶段事件处理程序的all（按该顺序），然后它转身并按捕获阶段的相反顺序触发气泡阶段事件处理程序的all

以下是引用中描述的代码片段：

<html>
  <head>
  </head>
  <body>
    <div id="myDiv">
      <a id="myAnchor" 
         href="http://bitovi.com/">bitovi!
      </a>
    </div>
  </body>
</html>

这是我不明白的。许多解释都将捕获和冒泡阶段描述为在DOM中来回走动，我理解这一点。我不明白在捕获阶段，当沿着树向下走时，如何触发“所有”事件，然后在树上触发所有气泡事件。“全部”指的是什么？是页面上的所有事件吗？它们是“静默”触发的，并且由于它们不是实际单击事件发生的位置，因此它们不会执行，实际触发的唯一事件是单击的元素，其余事件只是出于某种原因存储的

在后来的博文中，另一种解释也让我感到困惑，这与我对“所有事件”的误解有关：

这描述了在执行捕获阶段事件期间发生的情况：

现在，我们循环遍历刚才收集的所有元素（和翻了个身）。我们需要在这里做几件事：

我们需要检查event.stopPropagation（）是否由触发的事件处理程序之一调用（请参阅此项目符号列表的最后一步）。如果是是的，只要打破这个循环-我们不需要迭代名单的其余部分
接下来，我们检查是否为当前正在评估的DOM节点设置了捕获阶段事件处理程序
最后，循环遍历我们收集的所有处理程序，并在当前正在评估的节点的上下文中执行它们

我被最后两个要点弄糊涂了。“检查是否为当前正在评估的DOM节点设置了任何捕获阶段事件处理程序”。我通常了解如何使用

addEventListener

方法设置事件处理程序。这里是混乱的地方：

“遍历收集的所有处理程序，并在当前正在评估的节点的上下文中执行它们”

是否收集并执行页面上的所有处理程序？如果事件具有stop.prop事件，或者没有在触发事件的dom节点上设置did，那么事件是否不会触发

对不起，如果这个问题让人困惑，我会尝试澄清任何没有意义的事情。谢谢

不是所有的事件，而是所有的事件处理程序。描述中只触发了一个事件，一个单击事件。该事件将传递给附加到捕获/气泡链中标识的元素的每个事件侦听器，除非StopRoPagation（）（或stopImmediatePropagation（））阻止它这样做

1学究式地说，他们是事件监听器。“充当指定它们的对象的非捕获事件侦听器。”