Thursday, 12 September, 2019 UTC
Summary
In this article you’ll learn about the
event.preventDefault() method. It’s a reminder of how much control we have over the client (the browser) when programming in JavaScript.If you’ve ever doubted how much power JavaScript gives you, try using
Examples event.preventDefault()! This method actually gives you the ability to prevent a browser’s default behavior for events.Let’s explore how
preventDefault works via interactive examples. 🎩Checkboxes
Normally, when you click on a checkbox it’ll toggle the check. However if you use
preventDefault it will actually stop the broswer from doing that.index.html
<input type="checkbox" id="myCheckbox"> index.js
document .getElementById('myCheckbox') .addEventListener('click', (event) => { event.preventDefault(); // 👈 }); Crazy! Just like that the browser is prevented from checking the box.
ⓘ About this sponsored banner
Links and input boxes
You can use
preventDefault on all sorts of different HTML elements. Let’s try using it on a link and an input box:index.html
<a href="https://duckduckgo.com" id="myLink">DuckDuckGo</a> <input type=text" id="myInput"/> index.js
document.getElementById('myLink') .addEventListener('click', (e) => e.preventDefault()) document.getElementById('myInput') .addEventListener('keypress', (e) => e.preventDefault()) This is probably obvious but should be mentioned: you’ll need to target the correct event. For example, targeting the keyup event on the
<input> won’t prevent you from entering text since that happens during the keydown event.That’s why we used keypress since it actually covers both keydown/keyup.
Non-Cancelable Events There are some events that the browser can’t prevent from happening. For example, events like scroll and wheel (for mouse wheel events!) will ignore
preventDefault.document.addEventListener('scroll', (e) => { e.cancelable; // false e.preventDefault(); // doh! the page still scrolls }); To determine whether an event can be canceled, inspect the event using
e.cancelable which will return a boolean value. Reminder:
preventDefault in Practice preventDefault() should be distinguished from stopPropagation() as using preventDefault will still allow your events to bubble up the DOM if you don't also use stopPropagation. In real life, you’ll probably resort to using
preventDefault most often to stop forms from automatically submitting when the submit button is clicked, giving you a chance to instead submit the form data asynchronously using JavaScript and something like the Fetch API to make an Ajax request.document .getElementById('myForm') .addEventListener('submit', (event) => { event.preventDefault(); // 👈 // ...send the form data and get a response asynchronously }); We’ve only used
preventDefault() on some of the more popular event types (click and keypress) but it works with all event types. If you’ve ever doubted how much power JavaScript developers are entrusted with, look no further than preventDefault which can actually veto a browser’s normal behavior! To learn more about preventDefault visit the Mozilla Developer Network 🤓