在 React 中，onKeyUp 和 onKeyUpCapture（以及 onKeyDown/Capture）有什么区别？

Question

我为此搜索了文档和问题，但很惊讶找不到一个。

在 React index.d.ts 文件中，它显示：

// Keyboard Events
onKeyDown?: KeyboardEventHandler<T>;
onKeyDownCapture?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyPressCapture?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
onKeyUpCapture?: KeyboardEventHandler<T>;

我想使用 onKeyUp 但后来我注意到了两个版本。这和 onKeyUpCapture 有什么区别，一个比另一个有什么好处？我什么时候使用每个？

Answer 1

react 中的事件处理程序传递 的实例SyntheticEvent，这是一个围绕浏览器本机事件的跨浏览器包装器。该术语capture与 React 无关。事实上，它是一个来自 DOM HTML Event 的概念。

事件传播DOM 事件的3 个一般阶段：

在捕获阶段：通过从窗口到目标的父目标的祖先中的事件对象传播。（事件归结为元素）。您几乎不想在实际代码中使用它。

该目标阶段：本次活动对象到达事件对象的事件的目标。此阶段也称为在目标阶段。如果事件类型表明事件没有冒泡，则事件对象将在此阶段完成后停止。

的气泡相：通过以相反的顺序目标的祖先中的事件对象传播，开始与目标的父，并与窗口结束。这个阶段也称为冒泡阶段。

事件对象被分派到事件目标。但是在分派开始之前，必须首先确定事件对象的传播路径。

传播路径是事件经过的当前事件目标的有序列表。这个传播路径反映了文档的层次树结构。列表中的最后一项是事件目标，列表中的前一项称为目标的祖先，紧邻的前一项称为目标的父项。

正如你在这张图片中看到的，它显示了从窗口开始，通过祖先链一直到元素目标的捕获阶段。然后当它到达目标元素时，它在那里触发 -目标阶段最后它冒泡到目标的祖先 -冒泡阶段（如果有任何祖先，将停止冒泡stopPropagation

所以 React 通过将它附加到onKeyUp哪个是为您提供捕获阶段onKeyUpCapture

3 个不同传播阶段的示例