React JS onDragCapture vs onDrag

Question

In React js to every drag event there is a corresponding event with "capture" prefix onDragEnter vs onDragEnterCapture, onDragLeave vs onDragLeaveCapture and so on. Could any one tell difference between those and when to use which? They both repond to similar events.

Answer 1

Basically Bubbling and Capturing are two ways of event propagation.

Bubbling : When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. Let’s say we have 3 nested elements form> div> p with a handler on each of them:

A click on the inner <p> first runs onclick:

1. On that <p>.
2. Then on the outer <div>.
3. Then on the outer <form>.
4. And so on upwards till the document object.

Capturing : The event is first captured by the outermost element and propagated to the inner elements:

So in the same example when you click the outer element <form> it runs on :

1. on that <form>
2. then the inner <div>
3. then <p>

While using react, to register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.

The same goes for the other events.

Source [1] [2]