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

Question

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

32

我搜寻了相关文档和问题，但惊讶地发现找不到一个。

在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，但后来发现了两个版本。 onKeyUp和onKeyUpCapture之间有什么区别？一个版本的优点是什么？在什么情况下应该使用每个版本？

- Mayron

这个回答解决了你的问题吗？onKeyPress Vs. onKeyUp and onKeyDown - Adam Strauss

3

抱歉，我知道那些内容，但React添加了一些以"Capture"结尾的新内容，我不知道它们是做什么的或者它们与其他内容有何不同。 - Mayron

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matin Kajabadi · Accepted Answer

在React中，事件处理程序传递了一个SyntheticEvent实例，它是浏览器本地事件的跨浏览器封装。术语capture与React无关，实际上它是来自DOM HTML事件的概念。 DOM事件有三个一般的事件传播阶段： 捕获阶段：事件对象从Window到目标的父级依次经过目标的祖先节点进行传播（事件向下传递到元素）。你几乎不需要在实际代码中使用它。 目标阶段：事件对象到达事件对象的事件目标。这个阶段也被称为目标阶段。如果事件类型表明事件不会冒泡，则事件对象将在完成此阶段后停止。 冒泡阶段：事件对象以相反的顺序通过目标的祖先节点进行传播，从目标的父级开始，直到Window结束。这个阶段也被称为冒泡阶段。

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

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

如图所示，它展示了从窗口开始到目标元素的祖先链中，经过捕获阶段，然后当它到达目标元素时，在那里触发 - 目标阶段，最后冒泡到目标的祖先 - 冒泡阶段（如果任何祖先使用stopPropagation停止冒泡）

因此，React通过将其附加到onKeyUp来提供捕获阶段，即onKeyUpCapture 三个不同传播阶段的示例