问事件捕获与事件冒泡

EN

This test建议使用捕获比使用冒泡略有性能优势。即使没有在事件被处理时立即终止它，但是当它被保留时，它是边缘的。我认为一个复杂的DOM会夸大两者之间的性能差异。

此链接提供了清晰的解释- https://www.quirksmode.org/js/events_order.html

作为web开发人员，您可以选择是在捕获阶段还是在冒泡阶段注册事件处理程序。这是通过“高级型号”页面上介绍的addEventListener()方法完成的。如果其最后一个参数为true，则为捕获阶段设置事件处理程序，如果为false，则为冒泡阶段设置事件处理程序。

假设你这样做了

element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)

如果用户单击element2，则会发生以下情况：

单击事件在捕获阶段开始。该事件检查element2的任何祖先元素是否具有用于捕获阶段的onclick事件处理程序。该事件在element1上找到一个。执行doSomething2()。事件向下传播到目标本身，没有找到捕获阶段的事件处理程序。该事件移至其冒泡阶段并执行doSomething()，该方法注册到element2以用于冒泡阶段。该事件再次向上移动，并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。情况并非如此，因此什么都不会发生。相反的情况应该是

element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)

现在，如果用户单击element2，则会发生以下情况：

单击事件在捕获阶段开始。该事件查看element2的任何祖先元素是否有用于捕获阶段的onclick事件处理程序，但没有找到。事件向下传播到目标本身。该事件移至其冒泡阶段并执行doSomething()，该方法注册到element2以用于冒泡阶段。该事件再次向上移动，并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。该事件在element1上找到一个。现在执行doSomething2()。在支持传统事件注册的W3C DOM的浏览器中与传统模型兼容

element1.onclick = doSomething2;

被视为冒泡阶段的注册。

事件冒泡的使用很少有web开发人员会有意识地使用事件捕获或冒泡。在目前的Web页面中，根本没有必要让一个冒泡事件由几个不同的事件处理程序来处理。用户可能会对鼠标单击后发生的几件事感到困惑，通常您希望将事件处理脚本分开。当用户单击一个元素时，会发生一些事情，当他单击另一个元素时，会发生其他事情。

当然，这种情况在未来可能会改变，并且有向前兼容的模型是很好的。但如今，事件捕获和冒泡的主要实际用途是注册默认函数。

我不确定，但我非常确定，你可以用冒泡做的任何事情，你都可以用捕获来做，反之亦然。

在同一个应用程序中，你会有一些冒泡的事件和一些捕获，这听起来是一个让事情变得非常混乱的好方法。我想说的是，我不认为冒泡和捕获真的很重要。重要的是你选择了一个并坚持下去。

W3C的API通常包含这类东西，它们有很多没有人真正关心的特性。也许这是另一个例子，说明良好的默认值可以如何消除对配置甚至整个功能的需求。