<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
// 阻止表单默认提交（页面跳转或刷新）
event.preventDefault();
// 自定义逻辑，比如验证或 AJAX 提交
console.log('表单被提交了！');
});
</script>
</body>
</html>运行结果如下：
在 JavaScript 中，submit 事件是表单（<form> 元素）提交时触发的事件。它通常用于在表单真正提交到服务器之前进行表单验证 、阻止默认提交行为（例如使用 AJAX 提交），或执行其他逻辑。
注意事项
submit事件只在<form>元素上触发
不能直接在<button>或<input type="submit">上监听submit事件。- 调用
form.submit()不会触发submit事件
如果你通过 JavaScript 调用form.submit()方法，浏览器不会 触发submit事件。只有用户点击提交按钮或按回车（在可提交表单中）才会触发。 - 阻止默认行为很重要
如果你想用 AJAX 提交数据，一定要调用event.preventDefault()，否则页面会刷新或跳转。 - 表单验证
浏览器内置的 HTML5 表单验证（如required、pattern等）会在submit事件触发前自动运行。如果验证失败，submit事件不会被触发。
示例：带验证的提交
javascript
document.getElementById('myForm').addEventListener('submit', function(e) {
const input = this.querySelector('input[name="username"]');
if (input.value.trim() === '') {
alert('用户名不能为空！');
e.preventDefault(); // 阻止提交
return;
}
// 可以继续用 fetch 发送数据
fetch('/submit', {
method: 'POST',
body: new FormData(this)
})
.then(res => res.json())
.then(data => console.log('成功:', data))
.catch(err => console.error('错误:', err));
e.preventDefault();
});总结
submit事件是表单提交的关键钩子。- 使用
event.preventDefault()控制是否真正提交。 - 适合做验证、AJAX 提交、日志记录等操作。
- 注意：程序调用
form.submit()不会触发该事件。
return 的作用是：提前退出函数，避免执行后续代码。
详细解释
假设完整的事件处理函数如下：
javascript
form.addEventListener('submit', function(e) {
const input = this.querySelector('input[name="username"]');
if (input.value.trim() === '') {
alert('用户名不能为空！');
e.preventDefault();
return; // 👈 关键在这里
}
// 后续逻辑：比如用 fetch 发送数据
console.log('正在提交表单...');
fetch('/api/submit', { /* ... */ });
});如果没有 return，即使用户输入为空、我们已经调用了 e.preventDefault()，后面的代码（如 fetch）仍然会执行，这通常不是我们想要的。
❌ 没有 return 的后果：
javascript
if (input.value.trim() === '') {
alert('用户名不能为空！');
e.preventDefault();
// 没有 return！
}
// 这行依然会执行！
console.log('正在提交表单...'); // 不该在验证失败时执行
fetch(...); // 可能发送无效数据！✅ 有 return 的好处：
- 在验证失败时，立即退出函数。
- 确保只有验证通过后，才会执行提交逻辑。
- 代码逻辑更清晰、安全。