javascript - React JS onDragCapture vs onDrag - Stack Overflow

admin管理员组

文章数量:1221774

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.

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.

• javascript
• html
• reactjs

Share Improve this question Follow edited May 17, 2021 at 8:27 mikemaccana 123k110110 gold badges427427 silver badges531531 bronze badges asked Nov 26, 2019 at 8:56 kunal vermakunal verma 48655 silver badges1515 bronze badges 2

• @RameshRajendran i am drying to create something with drag drop and when i see the events available for drag to every drag event i get a corresponding event with Capture prefix... – kunal verma Commented Nov 26, 2019 at 9:16
• @RameshRajendran like both onDragEnter and onDragEnterCapture are available – kunal verma Commented Nov 26, 2019 at 9:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 21

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]

本文标签： javascriptReact JS onDragCapture vs onDragStack Overflow