What is difference between stopPropagation() and stopImmediatePropagation()?

JavaScriptVeeam

stopPropagation() vs stopImmediatePropagation()

In web development, both stopPropagation() and stopImmediatePropagation() are methods of the Event interface used to control how events travel through the Document Object Model (DOM). However, they have a key difference in how they affect other event listeners on the same element.

The Core Difference: Handling of Other Listeners on the Same Element

The fundamental distinction between the two methods lies in how they handle multiple event listeners attached to the same element for the same event type.

  • stopPropagation(): This method prevents an event from further propagating through the DOM tree, either in the bubbling phase (upwards) or the capturing phase (downwards). However, if there are other event listeners attached to the same element for the same event, they will still be executed.
  • stopImmediatePropagation(): This method does everything that stopPropagation() does, but it also prevents any other event listeners on the same element from being executed for the same event. Essentially, it halts all further event processing for that specific event, including on the current element.

Comparison

Imagine you have a div element with two separate click event listeners attached to it.

const myDiv = document.getElementById('myDiv');

myDiv.addEventListener('click', (event) => {
  console.log('First listener');
  // event.stopPropagation();
  // event.stopImmediatePropagation();
});

myDiv.addEventListener('click', (event) => {
  console.log('Second listener');
});

document.body.addEventListener('click', () => {
  console.log('Body listener');
});

Here's how each method would affect the outcome when the div is clicked:

No method called:

  • 'First listener' is logged.
  • 'Second listener' is logged.
  • The event bubbles up to the body.
  • 'Body listener' is logged.

stopPropagation() used in the first listener:

  • 'First listener' is logged.
  • 'Second listener' is still logged because stopPropagation() does not affect other listeners on the same element.
  • The event is prevented from bubbling up, so the body's listener is not executed.

stopImmediatePropagation() used in the first listener:

  • 'First listener' is logged.
  • The 'Second listener' on the same div is not executed.
  • The event is also prevented from bubbling up, so the body's listener is not executed.

When to Use Each Method

Use stopPropagation() when:

  • You want to prevent an event from affecting parent or child elements in the DOM tree.
  • A common use case is to have a clickable element inside another clickable element, and you only want the inner element's click to register.

Use stopImmediatePropagation() when:

  • You have multiple event listeners on a single element and, under certain conditions, you want to prevent subsequent listeners on that same element from running.
  • This is particularly useful in complex applications or when integrating third-party scripts that might also attach event listeners to the same elements, and you need to ensure your listener has exclusive control in certain scenarios.
00:00

Table of Contents