preventDefault vs. stopPropagation vs. stopImmediatePropagation

Working with events in HTML and JavaScript

Kunal Tandon
Aug 9 · 3 min read

While creating applications in JavaScript, we use the above terms interchangeably without knowing the difference between them.

Do you know what makes them different from each other?

In this article, we’ll discuss what the actual difference is among these statements and delve into the scenarios in which each of them is to be used.

Before we begin understanding these functions, we need to first understand event bubbling and event capturing.


What Are Event Bubbling and Event Capturing?

Event bubbling and event capturing are different ways by which an event (e.g., 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 that 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. As a result, clicking on the button will print:

child
parent

Now that you’ve 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/text-area field focuses the input and places the 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 the click of a checkbox and notice it prevents the checkbox from getting checked.

.

The click event on the checkbox by default checks/unchecks the checkbox, and it’s 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 an 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, clicking 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, 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)

Better Programming

Advice for programmers.

Kunal Tandon

Written by

👨‍💻 Coder • 📝 Blogger • 🎮 Game Developer …………… 💁🏼‍♂️ Connect with me @ https://www.linkedin.com/in/kunal-tandon/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade