[React] Event Capturing and Event Bubbling

Imagine a component which has the following code:

This sample will render a ‘Parent’ text and a ‘Child’ text like this:

Rendered contents

How would the console output differ between clicking ‘Parent’ text versus ‘Child’ text? Let us analyze each output to learn about event propagation.

Clicking ‘Parent’ text

Observations:

• Capturing phase came before bubbling phase.
• Event target and currentTarget seem to be the same (assumption at this point).

Console output when ‘Parent’ text is clicked

Clicking ‘Child’ text

Observations:

• Capturing phase came before bubbling phase (same result as above).
• Capturing occurred as traversing down through the DOM elements (going from parent to child).
• Bubbling occurred as traversing up through the DOM elements(going from child to parent).
• Event target refers to the (most deeply nested) element that triggered the event and currentTarget refers to the element handling the event.

Console output when ‘Child’ text is clicked

Summary

Looking at this trivial example, there were a few takeaways.

• Event propagation consists of event capturing and event bubbling. It starts with capturing phase and event captures down until it reaches event.target. Then, event bubbles up from event.target to all the way up.
• In React, event handlers for the capturing phase can be registered by appending Capture to the event name (onClick vs. onClickCapture).
• event.target is the inner most element that triggered the event and event.currentTarget is the element handling the event.
• Event propagation can be stopped from capturing and bubbling by adding event.stopPropagation().

So at this point, looking at the diagram below will make sense.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events

Reference:

SyntheticEvent - React

Introduction to events - Learn web development | MDN