Question

在SO上阅读了很多教程和帖子之后，我脑子里已经有了这个问题，但是没有人能够给我一个通过这个块所需的心智模型。

以下摘自terrific blog有关浏览器事件的帖子：

当我们点击锚标记时，DOM计算捕获阶段路径，触发全部根文档，正文，div和锚标记的捕获阶段事件处理程序（按此顺序），以及然后它转向并以捕获阶段的相反顺序触发所有的泡泡阶段事件处理程序。

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

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

这是我不明白的。许多解释都谈到了捕获和冒泡阶段，就像我理解的那样向下和向上走。我不理解＆＃34; all＆＃34; 如何在捕获阶段沿着树走下来触发事件，然后所有的泡沫事件都会在树上被触发。什么是＆＃34;所有＆＃34;参考？它是页面上的所有事件吗？他们被解雇了＃34;默默地＆＃34;并且由于它们不是实际点击事件发生的地方，它们不会执行，实际触发的唯一事件是被点击的元素，其余的事件只是出于某种原因存储？

后来在博客文章中，这个其他解释也让我感到困惑，并且与我对所有事件的引用的误解有关＆＃34;：

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

现在，我们遍历我们刚刚收集的所有元素（和   翻了个身）。我们需要做的一些事情：



我们需要检查是否被其中一个事件处理程序调用了event.stopPropagation（）（请参阅此项目符号列表的最后一步）。如果它   只是突破了这个循环 - 我们不需要迭代   列表的其余部分。



接下来，我们检查是否为当前正在评估的DOM节点设置了捕获阶段事件处理程序。



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

我对最后两个要点感到困惑。＆＃34;检查是否为当前正在评估的DOM节点设置了任何捕获阶段事件处理程序＆＃34;。我通常了解如何使用addEventListener方法设置事件处理程序。这就是混乱的地方：

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

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

很抱歉，如果这个问题令人困惑，我会尽量澄清任何无意义的问题。谢谢！

Answer 1

并非所有事件，所有事件处理程序¹。在描述中只触发了一个事件，即单击事件。该事件被传递给附加到捕获/冒泡链中标识的元素的每个事件监听器，除非它通过stopPropagation（）（或stopImmediatePropagation（））停止这样做。

¹_{迂腐地说，他们是事件监听器。 Event handlers“充当指定它们的对象的非捕获事件侦听器。”}

事件监听器捕获和冒泡阶段事件

1 个答案: