Difference Between preventDefault and stopPropagation in JavaScript

When working with events in JavaScript, it's often necessary to prevent the default behavior of an element from occurring, or to prevent an event from bubbling up the event chain. This can be achieved using the event.preventDefault() and event.stopPropagation() methods.

The event.preventDefault() method prevents the default behavior of an element from happening. For example, if you have a form with a submit button, and you want to prevent the form from being submitted when the button is clicked, you can use preventDefault() to cancel the default submission behavior.

Here's an example of how to use preventDefault() in vanilla JavaScript:

document.querySelector('form').addEventListener('submit', function(event) {
  // prevent default form submission
  event.preventDefault();

  // do something with the form data
});

In this example, we use preventDefault() in the submit event listener to prevent the default form submission behavior. This allows us to do something with the form data instead of submitting the form.

On the other hand, the event.stopPropagation() method prevents an event from bubbling up the event chain. This can be useful if you have a click event on a parent element, and you want to prevent that event from being triggered when a child element is clicked.

Here's an example of how to use stopPropagation() in vanilla JavaScript:

document.querySelector('button').addEventListener('click', function(event) {
  // stop click event from propagating to parent element
  event.stopPropagation();

  // do something with the click event
});

In this example, we use stopPropagation() in the click event listener to prevent the click event from being propagated to the parent element. This allows us to handle the click event on the button without triggering the click event on the parent element.

In summary, event.preventDefault() prevents the default behavior of an element from happening, while event.stopPropagation() prevents an event from bubbling up the event chain. These methods can be useful when working with events in vanilla JavaScript, React, Angular, Vue and other, and can help you to create more sophisticated interactions on your web page.