What are React ...Capture events?

Question

There is a duplicate for each event on react audio and video tags, for example it has onCanPlayThrough property and onCanPlayThroughCapture as well. Behaviour for both of them in the browser is completely the same.

Do we need to use ...Capture events instead of standard events? What is the main idea for them? Where can I find information about them.

Answer 1

This is covered in the React documentation here, though it's easy to miss:

The event handlers below are triggered by an event in the bubbling phase. 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.

DOM events have multiple phases (see diagram below), which are (in order):

• Capture
• Target
• Bubbling

Normally we use target or bubbling (addEventListener's false third param [the default]), but there are rare occasions where you want to hook into the capture phase instead (third param = true). The ...Capture handlers let you do that.