Understanding preventDefault(), stopPropagation() and stopImmediatePropagation() when working with events in HTML

August 09, 2019

While creating applications in JavaScript, we use the above terms interchangeably without knowing the difference between them.
Do you know what is it that makes them different from each other?


In this article, we will what is the actual difference among these statements the scenarios in which each of them is to be used.
Before we begin understanding these functions, we need to understand first Event Bubbling and Event Capturing.

What is Event Bubbling and Event Capturing?

Event Bubbling and Event Capturing are different ways by which an event(say click event, key event, etc.) moves in a DOM structure.
To understand this, let's consider the following HTML element pseudocode
<div class="parent" (onClick)="console.log('parent')">
    <button class="child" (onClick)="console.log('child')"></button>
</div>
Event Capturing means when we click on the button, the click event will start from the top and move to the children. As a result, clicking on the button will print
parent
child



Event Bubbling is the inverse of Event Capturing. In Event Bubbling, the event will start from the child element and move up to the parent until the document. As a result, clicking on the button will print
child
parent



Now that you have understood Event Bubbling and Event Capturing, we can understand preventDefault()stopPropagation() and stopImmediatePropagation()

event.preventDefault()

This method is used to stop the browser’s default behavior when performing an action. Following are some examples of the default behavior,
  • Clicking on a checkbox/radio input selects/deselects a checkbox
  • Clicking on an input/textarea field focuses the input and places cursor in the input element
By using event.preventDefault(), the default behavior of an HTML element can be prevented.
I have added an event.preventDefault() on click of a checkbox and notice that it prevents the checkbox from getting checked.


The click event on the checkbox by default checks/unchecks the checkbox and it the default behavior provided by a browser. With event.preventDefault(), we can suppress such default behavior of the browser and can handle the events completely on our own.

event.stopPropagation()

This method is used to prevent the propagation of an event as defined in the capturing/bubbling phase of the flow of event in the browser.
Consider the following HTML pseudocode
<div class="parent" (onClick)="console.log('parent')">
    <button class="child" (onClick)="console.log('child')"></button>
</div>
If the browser is supporting Event Bubbling, click on the button will print
child
parent
If we change the click event of the button to the following function call
<div class="parent" (onClick)="console.log('parent')">
    <button class="child" (onClick)="buttonClick(event)"></button>
</div><script>
    function buttonClick(event) {
        event.stopPropagation();
        console.log('child');
    }
</script>
Now clicking on the Button will print
child
Since we stopped the propagation(event bubbling in this case) of the event on clicking, so it printed only ‘child’ in the console.

event.stopImmediatePropagation()

What if we have multiple click listeners on a single HTML element?
Consider the following code snippet
<script>
    $("div").click(function(event) {
      event.stopImmediatePropagation();
      alert('First click triggered');
    });

    $("div").click(function(event) {
      // This function won't be executed
      alert('Second click triggered');
    });
</script><div>Click me</div>
Also Try commenting the stopImmediatePropagation() statement in the Fiddle
With stopImmediatePropagation(), along with the event propagation, other event handlers will also be prevented from execution.
As a result, clicking on the div element will
  1. Prevent Event Bubbling to the parent elements
  2. Prevent the execution of any other event listener attached to the element
Thus we can say that:
stopImmediatePropagation = stopPropagation + (Other event listeners removed)

You Might Also Like

1 comments

Follow by Email