📅 最后修改于: 2023-12-03 15:06:49.823000 🧑 作者: Mango
在前端开发中，我们经常需要处理表单提交的逻辑。当用户提交表单数据时，浏览器默认会刷新页面或者跳转到指定的 URL。如果我们不想刷新页面或者跳转到指定的 URL，可以使用 preventDefault 方法来阻止默认行为的发生。
preventDefault 方法是 Event 对象的一个方法。通过在事件处理程序中调用该方法，可以防止事件的默认行为的发生。在表单提交的情况下，就是阻止表单提交时的页面刷新或者跳转。
下面是一个示例代码：
document.querySelector('#form').addEventListener('submit', function(event) {
// 阻止表单的默认行为
event.preventDefault();
// 处理表单数据
});
在上面的代码中，我们首先通过 document.querySelector 方法获取 #form 元素，并添加了一个 submit 事件的监听器。当用户提交表单数据时，就会触发该事件，然后执行事件处理程序中的代码。
在事件处理程序中，我们调用了 event.preventDefault() 方法来阻止表单的默认行为。然后就可以处理表单数据了。
下面是一个完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用 preventDefault 防止表单重新加载</title>
</head>
<body>
<form id="form">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">登录</button>
</form>
<script>
document.querySelector('#form').addEventListener('submit', function(event) {
// 阻止表单的默认行为
event.preventDefault();
// 获取表单数据
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
// 处理表单数据
console.log(`用户名：${username}，密码：${password}`);
});
</script>
</body>
</html>
在上面的示例代码中，我们创建了一个登录表单，并添加了一个 submit 事件的监听器。当用户点击登录按钮时，就会触发该事件，然后执行事件处理程序中的代码。
在事件处理程序中，我们调用了 event.preventDefault() 方法来阻止表单的默认行为。然后通过 document.querySelector 方法获取表单中的用户名和密码，并打印到控制台中。
通过使用 preventDefault 方法，我们可以防止表单提交时的页面刷新或者跳转。这在前端开发中是非常有用的技巧。