To be clear, even bubbling and event capturing is not a react concept but a javascript & concept surrounding the behavior of the dom.

To understand event bubbling, we first need to understand how the dom works.

DOM, also known as Document Object Model, is the data representation of all the nodes and contents of the web application.

This probably doesn’t make a lot of sense unless you are a developer so allow me to be even more bare bone about this:

• The DOM is what allows you to see all the stuff on this web browser and it manages it.

Here is a better picture of how it can look like:

Let’s say we the div and the p are attached with onClick functions themselves, with the div’s onclick function printing out “console.log(“this is div”)” and the p’s onclick function printing out “console.log(“this is p”)”.

With event bubbling, when the user clicks on p it will bubble down to p, trigger the onclick function there, the trigger div’s onclick function and another onclick function that its parents and/or grandparent nodes contain.

The workflow will be as following: p->div-> body-> html

Here is an example of how it will work in a react application:

#javascript #event-bubbling #html