事件流：冒泡和捕获

这是前端面试问题系列的第 7 篇文章。如果您希望提高准备水平或保持最新状态，请考虑加入前端训练营？.

---

事件冒泡和捕获，都是DOM（文档对象模型）中的传播机制。这两种机制是相反的。

事件冒泡

在事件冒泡中，事件在触发目标元素（event.target）上的处理程序后向上传播（冒泡）到文档的根元素。在其过程中，它会触发父元素上的所有事件处理程序。

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

首先调用按钮上的处理程序，并将 event.target 属性设置为按钮，因为它启动了事件。事件在到达根元素的过程中，会调用其父元素的事件处理程序。

几乎所有事件都会冒泡，但也有一些例外，例如焦点事件不会冒泡。

您可以通过调用事件的 stopPropagation() 方法来停止冒泡。如果上面代码片段中按钮的事件处理程序停止传播，则不会调用容器的事件处理程序。

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

您可以通过访问 target.event 属性来访问发起事件的元素。此外，可以使用 event.currentTarget.
访问正在执行处理程序的元素

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

想要了解有关 this 关键字的更多信息吗？我写了一篇关于它的文章。

事件捕捉

到目前为止我们只看到了一半的图片。当单击上面代码片段中的按钮时，它不是接收该事件的第一个元素。 ？

事件流由三个阶段组成：

1. 捕获阶段：事件从根元素流向目标元素。
2. 目标阶段：在目标元素上接收事件。
3. 冒泡阶段：事件开始传播回根元素。

默认情况下，所有事件处理程序仅在目标阶段和冒泡阶段调用。要在捕获阶段调用事件处理程序，请传递 true 作为第三个参数。

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

如果您在捕获阶段使用处理程序，则在冒泡阶段不会调用它。

与冒泡类似，当在捕获阶段调用 event.stopPropagation() 时，它不会让事件进一步流动，即在本例中沿着 DOM 向下流动。

在我们之前讨论的代码片段中，如果容器在捕获阶段停止传播，则永远不会调用按钮的处理程序。

/*
<div>



<p>这就是为什么你应该总是有充分的理由使用 event.stopPropagation()。它可能会导致难以在复杂或深度嵌套的 DOM 树中调试的意外问题。</p>
<p>与冒泡相比，事件捕获很少使用。冒泡有很多用例，例如“事件委托”——一种重要的性能模式。</p>

<p>这篇文章为下一个主题——事件委托奠定了基础。确保你理解它。有疑问吗？将它们留在评论中。 ✌️</p>


<hr>

<h2>
  
  
  概括
</h2>

<ol>
<li>事件流由三个阶段组成：捕获、目标和冒泡阶段。</li>
<li>在捕获阶段，事件从根元素向下流向目标(event.target)元素。</li>
<li>在冒泡阶段，事件从目标元素流向根元素。</li>
<li>默认情况下，仅在目标阶段和冒泡阶段调用所有事件处理程序。</li>
<li>通过在 addEventListener 函数中传递第三个参数，您可以在捕获阶段设置处理程序。</li>
<li>在事件流中的任何一点，调用 event.stopPropagation() 将阻止事件进一步流动。</li>
</ol>


<hr>

<p>喜欢你刚刚读到的内容吗？ ？考虑加入前端训练营的候补名单。</p>

<p>留下一些反应“？”和评论，因此这篇文章可以帮助像您这样的其他开发人员。 ？</p>


          </div>