Event bubbling

Definition:

Event bubbling is a process in which an event starts from the element you want to click (the innermost element).

Then it moves upward, step by step, to all the elements above it.

For example, if a webpage contains a form, inside it a div, and inside that div a button, then clicking the button will trigger the event first on the button → then on the div → then on the form → and finally on the document.

This upward movement of an event through parent nodes is called event bubbling.

Now you will clearly understand the event bubbling logic through the flowchart.

[ You click the button ]
|
v
[ then starts on the button (child) ]
|
v
[ and then it goes up to the parent (the element outside the button) ]
|
v
[ and it goes up one step at a time. ]
|
v
[ and then it reaches all the bigger elements above ]

Whereas:
Button = child
Div = parent
Body = grandparent