Event Bubbling & Capturing in JavaScript

Event Bubbling and Event Capturing are two ways to propagate in the DOM Tree.

Suppose we have nested HTML elements, we have three div tags:

Outermost div -> Grand Parent

Inner div -> Parent

Innermost div -> Child

So, here how propagation of events occur ?

Event Propagation occurs in two ways:

Event Bubbling: If you click on child div, onClick() child method is called first, then, it moves up to the hierarchy and it goes directly to the end of the DOM. So, after child() method, parent() method is called and then grandParent() method is called. It is also called bubbling out the DOM tree. If you click on parent div first, then first parent() method is called and then grandParent() method is called.

Event Capturing: It is also called Event Trickling and it is the opposite of Event Bubbling. Event Capturing is the propagation of event from to top to down the DOM tree. So, in this case when you click on child div, grandParent() method is called first and then parent() and then child() method at last. If you click on parent() method first, then first grandParent() method is called and then parent() method is called.