When we visit a webpage, numerous actions get triggered. These actions can include clicking on a button, completing and sending a form, closing a tab, selecting a checkbox, or scrolling the page. These event activities can be stopped in JavaScript. Furthermore, it is possible to prevent them from carrying out the related default action. More specifically, the “preventDefault()” JavaScript method halts the execution of a cancelable event.
This post stated:
- What is the event.preventDefault() method in JavaScript?
- How to Use the event.preventDefault() Method in JavaScript?
What is event.preventDefault() in JavaScript?
The “preventDefault()” is a JavaScript method that is utilized for preventing the browser from executing the default actions and events for the specified elements. It can prevent the user from executing the request by hitting the link.
How to Use the event.preventDefault() Method in JavaScript?
To use the “event.preventDefault()” method in JavaScript, follow the below-stated syntax
In the above syntax:
- “event” is utilized for denoting any action.
- “preventDefault()” method does not allow any parameters to pass. It does not accept the parameter value.
Example 1: Prevent Checkbox Using preventDefault() Method
To prevent checkboxes using the “preventDefault()” method, first, make an HTML page and add a heading with the help of any heading tag from “<h1>” to “<h6>” tag. To do so, the “<h1>” tag is utilized here:
Use the “<label>” HTML tag and add the description inside the tag:
Now, use the “<input>” element and add the attribute listed below:
- Specify the “type” attribute and set the value as “checkbox”.
- “id” attribute is used to set an id with a particular name:
Insert the script tag and add the following code:
document.getElementById("prevent-default").addEventListener("click",(event)=>
{event.preventDefault();
})
</script>
In the above code snippet:
- Use the “getElementById()” method to return an element with a particular id. The getElementById() method returns null if the element does not exist.
- “addEventListener()” method is used for linking an event handler with a defined element.
- Then, pass the “preventDefault()” as the parameter to this method, which will prevent the added input type element.
Output
Example 2: Prevent Input Field Using preventDefault() Method
To prevent the input field using the “preventDefault()” method, first, add a label using the HTML “<label>” tag:
Specify the input type as “text” and assign an id:
Utilize the “<script>” tag and add the following code for further processing:
document.getElementById("prevent-default").addEventListener("input",(e)=>{
if(event.cancelable){
alert("Input is cancelable")
}
else{
alert("It not cancelable")
}
})
</script>
In the above code snippet:
- Use the “getElementById()” to get the input field element.
- Then, utilize the “if/else” statement and add the required condition.
Output
That’s all about the event.preventDefault() in JavaScript.
Conclusion
The “preventDefault()” is a JavaScript method that is utilized to prevent the browser from executing the default actions and events for the specified elements. You can use this method to prevent the checkbox, input field, radio button, and other input types. This tutorial has stated the usage of the JavaScript “event.preventDefault()” method.
