应绑定到form元素的submit事件并调用event.preventdefault()，因表单可通过按钮点击或回车触发，仅监听按钮click会遗漏回车提交；preventdefault必须同步执行，不可延迟，否则默认刷新已发生。
在 JavaScript 中，表单的 submit 事件默认会提交数据并刷新页面。要阻止这个行为，只需在事件处理函数中调用 event.preventDefault() 即可。
为什么需要 preventDefault
浏览器对 <form></form> 元素有默认提交机制：收集表单字段、按 method 和 action 发送请求，并跳转或刷新当前页。如果想用 JavaScript 自行处理（比如用 fetch 提交、做前端校验、弹窗提示等），就必须阻止这个默认动作。
正确绑定 submit 事件并阻止刷新
推荐使用 addEventListener 绑定到 form 元素上，而不是给提交按钮加 click 事件——因为表单还可能通过回车键提交，submit 事件能覆盖所有提交方式。
示例：
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // ✅ 关键：阻止默认提交和刷新
console.log('表单已拦截，可执行自定义逻辑');
// 比如：获取输入值、验证、调用 fetch...
});
常见错误与注意事项
-
不要在按钮 click 中阻止：仅监听按钮的
click无法捕获回车提交，且容易漏掉默认行为。 -
preventDefault 必须在事件触发时调用：不能延迟（如放在
setTimeout里），否则默认行为已发生。 -
确保事件对象存在：箭头函数写法也支持，但需显式传参：
form.addEventListener('submit', (e) => { e.preventDefault(); }) - 表单验证失败时也应 preventDefault：即使校验不通过，也要阻止提交，避免无效数据发到后端或页面刷新。
配合表单数据获取一起使用
阻止刷新后，通常需要读取用户输入。可以用 FormData 对象轻松提取所有字段：
form.addEventListener('submit', function(event) {
event.preventDefault();
const data = new FormData(form);
const obj = Object.fromEntries(data); // 转为普通对象（注意：同名多选框需额外处理）
console.log(obj);
// 后续可 send via fetch 或校验逻辑...
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
