javascriptreactjseventscapture

how to register an event handler for the capture phase in React-js?

By default event of element are in the bubbling phase. in javascript if we going to convert it to capture, we have the following way:

1- when the value of useCapture is set to true, the event uses the capturing propagation(in third argument):

element.addEventListener(event, function, useCapture);

2- jQuery only uses event bubbling.

now my main question is that although we make the evnet inline <div onclick= {} /> , how to change bubbling phase to capturing in React?

Solution

  • This is quite straightforward.

    For event bubbling

    <div onClick={() => { alert('Bubbling');}} >
This will result into event bubbling
</div>

    For event capturing

    <div onClickCapture={() => { alert('Capturing');}} >
This will result into event capturing
</div>

    You can also refer to the official docs here