Event Bubbling, Capturing and Propagation in JavaScript

Events in javascript are generally occurrences that trigger some functionalities and can result in a change of certain behavior. Event Bubbling and Capturing are two ways of event propagation in the DOM tree. In simple words, the event propagation method determines the order in which the elements receive the event.

In this article, we will be understanding Event Bubbling and capturing (a.k.a Trickling) so that you can get an in-depth understanding of them.

Event Bubbling 

In event bubbling the event is first captured by the innermost element and then propagated to the outer elements. Let us understand it with the help of an example:

Example :

index.html

index.js

Output

As we all know that in event bubbling the event is first captured by the child element and then it gets propagated to the parent element. So the output to the screen is button and then div.

Event Capturing 

In event capturing the event is first captured by the outermost element in the DOM and then it is propagated to the inner elements in the DOM. Some of the developers call event capturing ‘trickling’ as it helps them to understand event capturing better. In general event capturing is not used most of the time while writing production-level code. Let us understand it with the help of an example:

Example : 

index.html

index.js

Output: 

As we all know on event capturing the event is first captured by the parent element and then it gets propagated to the child elements. So the output to the screen is div and then button. In event capturing we add a third parameter to EventTarget.addEventListener() which takes its argument as a boolean value. The parameter is called by the name useCapture and passing true to it will cause the listener to be in capturing phase.Generally, the default value is false which will apply to the bubbling phase.

Event.stopPropagation()

Event.stopPropagation method is used to prevent further propagation of the DOM tree and only run the event handler from which it is called. Let us see it with the help of a simple example:

index.html

index.js

Output

As we all know the Event.stopPropagation method is used to prevent further propagation to the DOM tree. So, in this example on clicking the button, we get the output in the console as a button because we have used the event.stopPropogation() method in the event listener of the button which helps the event to stop propagating further after the button is being consoled to the screen. In general, we can say that event.stopPropogation() is quite helpful in stopping event bubbling and event capturing.

Event.stopImmediatePropagation prevents the other listeners from the same event to be called after it is being executed. For example, if there are many event listeners attached to the same element and they are called in the order in which they are added and you want the event to stop propagating from a particular event in the order then you can use the stopImmediatePropogation method. Let us see it with the help of an example:

index.html

index.js

Output :

As we all know that Event.stopImmediatePropagation prevents the other listeners from the same event to be called after it is being executed. So the output to the console is button and button1. If we add another event listener to the button element and try to console button3 in the screen then it will not happen as we used Event.stopImmediatePropogation method above which stops the propagation of the other events of the button elements as soon as it gets executed.

Event.preventDefault()

Event.preventDefault() method is used to prevent the browser from executing the default behavior of the selected element. Let us understand it with the help of an example

index.html

index.js

AS we all know the Event.preventDefault() method is used to prevent the browser from executing the default behavior of the selected element. So on binding the event.preventDefault() method inside the event listener of the anchor element will prevent it from showing its default behavior. And as a result on clicking on home, it will not get redirected to the home.html page.