Several events can be fired when we access a website. These events could be a button click, filling out a form and submitting it, closing a tab, clicking a checkbox, or scrolling a page. All of these are **events**. 

In JavaScript, these events' actions can be canceled. Yes, they can be kept from executing the default action that is associated with it. This is done using the `preventDefault()` method of an event. The **`preventDefault()` method** of an event is used to stop a cancelable event from executing.

# 
## Syntax
```
event.preventDefault();
```

## Code 

### Example 1
The following code stops a checkbox from executing its default action by using the `preventDefault()` method.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event.preventDefault()</title>
</head>
<body>
    <label>A developer?</label>
    <br/>
    <input type="checkbox" id="prevent">Yes

    <script>
        document.getElementById("prevent").addEventListener("click",(event)=>{
            event.preventDefault();
        })
    </script>
</body>
</html>

codemirror



> Some event actions cannot be prevented using the `event.preventDefault()`. In order to check if an event can be prevented, you can check its `event.cancelable` property.
This property can either be `false` or `true`.

### Example 2
The `oninput` event on an `input` element is not cancelable. Therefore, it will still allow a user to input strings of characters. Take a look at the example below. There will be an alert when you input your texts, and you will still be able to input more because the `oninput` event action is not cancelable.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event.preventDefault()</title>
</head>
<body>
    <label>Enter any text</label>
    <br/>
    <input type="input" id="prevent">

    <script>
        document.getElementById("prevent").addEventListener("input",(e)=>{
            if(event.cancelable){
                alert("oninput event is cancelable!")
            }else{
                alert("oninput event is not cancelable!\nSo you can still type!")
            }
        })
    </script>
</body>
</html>

What is event.preventDefault() in JavaScript?

Several events can be fired when we access a website. These events could be a button click, filling out a form and submitting it, closing a tab, clicking a checkbox, or scrolling a page. All of these are events. In JavaScript, these events  actions can be canceled. Yes, they can be kept from executing the default action that is associated with it. This is done using the preventDefault() method of an event. The preventDefault() method of an event is used to stop a cancelable event from executing.  Syntax event.preventDefault();  Code Example 1 The following code stops a checkbox from executing its default action by using the preventDefault() method. 