时间戳

首页 > 解决方案 > 在 React 中，onKeyUp 和 onKeyUpCapture（以及 onKeyDown/Capture）有什么区别？

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

问题描述

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

在 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 有什么区别，一个比另一个有什么好处？我什么时候使用每个？

标签： htmlreactjsdom-events

解决方案

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

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

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

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

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

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

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

这是一个点击 <td> 的 DOM 事件流示例

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

所以 React 通过附加它来给你捕获onKeyUp阶段onKeyUpCapture

3 个不同传播阶段的示例

推荐阅读