JavaScript basics: Event Propagation

Event Propagation in Javascript

There have been times when many developers get confused about the flow of events in the DOM like when we click on an element but instead of the target element, its parent’s event is also called or vice-versa.

I have encountered this problem many times. This is one of the main concepts in javascript, which is used while developing and is also asked in many javascript-based interviews.

Event propagation tells you about the event and its direction of propagation. Here we will discuss two main event propagation techniques which are:-

Event Bubbling

In this type of propagation, series of events execute outwards in the DOM. In the image shown above, we have 3 divs inside the DOM (child, middle, and parent). If we click on the child element, the first child will be clicked followed by the middle div and finally, the parent div will be clicked.
We can understand it better by relating it with the behavior of bubbles, as bubbles have a property of coming outwards so the same way we call this behavior event bubbling as these events propagate outwards.
In the image above the yellow line states the direction of the event in the event bubbling.

Event Capturing

In this type of propagation, events propagate inwards in DOM. So if we click on the child div then the first event will be called on the parent div followed by the middle and child ones.
Capturing is shown by the blue line in the image, as it is coming from the outwards executing the parent div first then the middle div and in the end the child div.
We have two types of propogation while executing any event and it can be decided by the browser which one we want to use.
So to specify this we use the useCapture property in the addEventListener() method.

addEventListener() methods take three parameters which are event, callback method, and the useCapture property. This useCapture property will tell us which type of propagation the browser wants to use.
If we have set it to true then event capturing will be enabled in the browser and if we haven't specified anything or used false then event bubbling will be used by the browser by default.

Event propagation is a very costly operation when we don't need any of the propagation cycles. It is useful when one event has more than one handler otherwise we can disable the event propagation.

We can disable this event propagation by the following ways:-

1. event.stopPropagation(): This method stops the further propagation of any particular event to its parent or child, invoking only the event handler of the target element.
2. event.stopImmediatePropagation(): This method will not only stop the further propagation but also stops any other handler of the target event from executing.
3. event.preventDefault(): This restricts the default action that belongs to the event from occurring. Simply putting preventDefault() cancels the event if it is cancelable. For example, this can be useful when clicking on a Submit button to prevent it from submitting a form

Any event handler can stop the event by calling event.stopPropagation(), but that’s not recommended, because we can’t really be sure if we need it or not.

The capturing phase is used very rarely. Usually, we handle events on bubbling and there’s a logic behind that.
In the real world, when an accident happens, local authorities react first. They know the most about the area where it happened. Then calling higher-level authorities if needed.

Let me know what do you think about using the event propagation in the comments below.