html - 在 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 的一个概念。

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

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

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

泡沫期 :事件对象以相反的顺序通过目标的祖先传播，从目标的父级开始，到窗口结束。此阶段也称为冒泡阶段。

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

传播路径是事件通过的当前事件目标的有序列表。这个传播路径反射(reflect)了文档的层次树结构。列表中的最后一项是事件目标，列表中前面的项称为目标的祖先，紧接在前面的项称为目标的父项。



正如您在这张图片中看到的，它显示了 捕获阶段从窗口开始，通过祖先链一直到元素目标。然后当它到达目标元素时，它会在那里触发 - 目标阶段最后它冒泡到目标的祖先 - 冒泡阶段 (如果有任何祖先，将停止冒泡 stopPropagation
所以 React 通过将其附加到 onKeyUp 来为您提供捕获阶段。这是onKeyUpCapture
Example of 3 different propagation phases