React是什么？如何使用它来捕获事件？

Question

在React的audio和video标签上，每个事件都有一个副本，例如它有onCanPlayThrough属性和onCanPlayThroughCapture。在浏览器中，这两者的行为完全相同。我们需要使用...Capture事件而不是标准事件吗？它们的主要思想是什么？在哪里可以找到关于它们的信息？

- Dmitriy Kovalenko

Answer 1

这在React文档这里有详细介绍，但很容易被忽视：

以下事件处理程序由冒泡阶段中的事件触发。要为捕获阶段注册事件处理程序，请将Capture附加到事件名称上；例如，您可以使用onClickCapture来处理捕获阶段中的单击事件，而不是使用onClick。

DOM事件具有多个阶段（请参见下图），按顺序分别是：

• 捕获阶段
• 目标阶段
• 冒泡阶段

通常我们使用目标或冒泡（addEventListener的第三个参数为false [默认值]），但也有罕见的情况需要改为使用捕获阶段（第三个参数= true）。使用...Capture处理程序可以让您这样做。

- T.J. Crowder

Answer 2

它们并不相同，文档 也指出了这一点：

下面的事件处理程序由冒泡阶段中的事件触发。要为捕获阶段注册事件处理程序，请将Capture添加到事件名称;例如，您可以使用onClickCapture来处理捕获阶段中的单击事件，而不是使用onClick。

与常规的DOM冒泡/捕获效果相同。如果你想要捕获，事件将首先在父元素上触发。在冒泡时，它将首先在实际元素上触发，然后冒泡到父级。

- Sami Kuhmonen

---

相比冒泡阶段，捕获阶段有哪些使用案例？ - Simon Hessner