在 Web 开发中，表单是极其常见的交互元素之一，表单的本质是收集用户输入的信息并将其发送给服务端进行处理。一般情况下，表单的提交行为是浏览器的默认行为，但是有时候需要在提交表单之前做一些校验或者其他处理，此时就需要防止表单的默认提交行为。这时候 preventDefault() 就派上用场了。

preventDefault() 是一种常用的防止浏览器默认行为的方法，常见的应用场景有：

- 防止表单默认提交

- 防止 a 标签默认跳转

- 防止按键的默认行为

本文主要介绍如何使用 preventDefault() 防止表单默认提交行为。

1. preventDefault() 方法

preventDefault() 方法是 Event 对象的一个方法，当该方法被调用时，将会防止事件的默认行为。在使用 preventDefault() 方法时，需要注意以下几点：

- preventDefault() 方法只能阻止当前事件对象的默认行为，不会影响其他事件对象的默认行为；

- preventDefault() 方法必须在事件处理函数中实现，在其它作用域或者异步中是无效的；

- preventDefault() 方法只有在浏览器支持该方法的情况下才有效，否则无效果。

2. 防止表单提交的方法

由于表单的默认行为是提交表单，当我们需要在提交表单前做一些校验或者其他处理时，需要防止表单的默认提交行为。下面是一些常见的方法。

2.1. 使用 onsubmit 事件防止表单提交

onsubmit 事件是表单提交时的事件，当 submit 按钮被点击时，onsubmit 事件被触发，此时可以使用 preventDefault() 方法防止表单的默认提交。

HTML 代码如下：

```html

```

代码解析：

- onsubmit 事件被绑定到了 form 标签上面；

- onsubmit 事件使用了 return false 语句来阻止表单默认提交。

2.2. 使用 onclick 事件防止表单提交

使用 onclick 事件可以防止表单的默认提交。由于 onclick 会在 submit 按钮被点击之后才会触发，此时直接使用 preventDefault() 就可以阻止表单的默认提交。

HTML 代码如下：

```html

```

代码解析：

- onclick 事件绑定到了 submit 按钮上面；

- onclick 事件使用了 event 对象的 preventDefault() 方法阻止表单默认提交。

2.3. 使用 addEventListener() 方法防止表单提交

addEventListener() 方法是 JavaScript 中常用的事件绑定方式，除了可以监听一个事件的发生外，还可以传递选项对象来控制事件监听的行为。在表单提交时，我们可以使用 addEventListener() 方法来监听表单提交的事件，并防止表单的默认提交。

HTML 代码如下：

```html

```

JavaScript 代码如下：

```javascript

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {

event.preventDefault();

});

```

代码解析：

- 使用 addEventListener() 方法监听了表单的 submit 事件；

- 在事件处理函数中使用了 preventDefault() 方法来阻止表单的默认提交。

3. 小结

在 Web 开发中，防止表单默认提交行为是一种必要的技能。在本文中，我们介绍了使用 preventDefault() 方法来防止表单的默认提交行为，并讨论了一些常见的防止表单提交的方法。

结果留给读者思考：防止表单提交之后，我们需要将表单数据发送给服务端进行处理，那么怎样才能实现表单数据的发送呢？