什么是 JavaScript 中的事件冒泡和捕获？

在 JavaScript 中，事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是两种不同的事件传递机制。它们描述的是当一个事件被触发时，它是如何传递到 DOM 树上的其他元素的。

事件冒泡

当一个元素上触发了某个事件（比如点击事件），它会首先执行自身绑定的该事件的处理函数（比如回调函数）。然后，该事件会从该元素开始向父元素传递，直到达到根元素。这个过程就被称为事件冒泡。

事件冒泡的示意图：

示例代码：

<div onclick="console.log('div clicked');">
  <p onclick="console.log('p clicked');">Click me</p>
</div>

假设我们点击了 p 元素，那么首先会执行 p 元素的点击事件处理函数，输出 p clicked。然后该事件会继续传递到 div 元素，并执行 div 元素的点击事件处理函数，输出 div clicked。

事件捕获

与事件冒泡相反，事件捕获（Event Capturing）是从根元素开始，以相反的顺序向下传递事件的过程。

事件捕获的示意图：

在事件捕获过程中，事件会首先在根元素上触发，然后向下依次传递至具体的元素，直至达到事件触发的元素。最后再执行该元素上绑定的事件处理函数。

示例代码：

<div onclick="console.log('div clicked');" capture>
  <p onclick="console.log('p clicked');">Click me</p>
</div>

假设我们点击了 p 元素，那么首先会执行 div 元素的点击事件处理函数，输出 div clicked。然后该事件会继续传递到 p 元素，并执行 p 元素的点击事件处理函数，输出 p clicked。

事件传递机制的选择

默认情况下，点击事件采用事件冒泡机制。如果我们希望为某个元素的事件设置事件捕获，可以通过为元素指定 capture 属性来实现。

在实际开发中，事件传递机制的选择取决于具体的业务需求。对于特定的场景，我们可能会选用或指定某个元素的事件传递机制，或者结合两种机制来实现代码逻辑。