javascript - React JS onDragCapture 与 onDrag

Question

在React js中，每个拖动事件都有一个带有“capture”前缀的相应事件onDragEnter 与 onDragEnterCapture、onDragLeave 与 onDragLeaveCapture 等等。有人能说出它们之间的区别以及何时使用哪个吗？他们都对类似的事件做出了回应。

Answer 1

基本上，冒泡和捕获是事件传播的两种方式。

冒泡:当某个元素上发生事件时，它首先在该元素上运行处理程序，然后在其父元素上运行处理程序，然后一直在其他祖先上运行。假设我们有 3 个嵌套元素 form> div> p每个都有一个处理程序:

点击内部<p>首先运行 onclick:

1. 关于<p> .
2. 然后在外面<div> 。
3. 然后在外面<form> .
4. 依此类推，直到文档对象。

捕获:事件首先被最外层元素捕获并传播到内部元素:

因此，在同一示例中，当您单击外部元素 <form> 时它运行于:

1. 关于<form>
2. 然后是内部<div>
3. 然后<p>

使用react时，要为捕获阶段注册事件处理程序，请将Capture附加到事件名称；例如，您可以使用 onClickCapture 来处理捕获阶段的点击事件，而不是使用 onClick。

其他事件也是如此。

来源[1] [2]