Enjoy 20% off all plans by following our social accounts!
Quiz

How do you prevent the default behavior of an event?

Topics
Web APIsJavaScript
Edit on GitHub

TL;DR

To prevent the default behavior of an event in JavaScript, you can use the preventDefault method on the event object. For example, if you want to prevent a form from submitting, you can do the following:

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault();
});

This method stops the default action associated with the event from occurring.

How do you prevent the default behavior of an event?

Using preventDefault method

The preventDefault method is used to stop the default action of an event from occurring. This is useful in scenarios where you want to override the default behavior of an element, such as preventing a link from navigating to a new page or stopping a form from submitting.

Example: Preventing form submission

To prevent a form from submitting, you can attach an event listener to the form's submit event and call preventDefault within the event handler:

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault();
  // Additional code to handle form submission
});

Example: Preventing link navigation

To prevent a link from navigating to a new page, you can attach an event listener to the link's click event and call preventDefault:

document.querySelector('a').addEventListener('click', function (event) {
  event.preventDefault();
  // Additional code to handle the click event
});

Example: Preventing default behavior in other events

The preventDefault method can be used with various other events, such as keydown, contextmenu, and more. Here is an example of preventing the default context menu from appearing on right-click:

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // Additional code to handle the right-click event
});

Important considerations

  • The preventDefault method should be called within the event handler function.
  • Not all events have a default behavior that can be prevented. For example, custom events do not have default actions.

Further reading

Edit on GitHub
Previous
Next