最常用且推荐的方式是给元素添加submit事件监听器，因它能覆盖回车提交、form.submit()调用等所有提交方式，需调用event.preventdefault()阻止默认行为，并可通过formdata获取数据。
在 JavaScript 中监听表单的 submit 事件，最常用且推荐的方式是给 <form></form> 元素添加事件监听器，而不是监听按钮的点击事件。因为表单可通过回车键、JavaScript 主动调用 form.submit()、或辅助设备等多种方式提交，只有监听 submit 事件才能覆盖所有情况。
使用 addEventListener 监听 submit 事件
这是现代标准做法，支持事件捕获/冒泡，可绑定多个监听器，且不会覆盖已有逻辑：
- 确保获取的是
<form></form>元素（不是按钮或 input） - 调用
event.preventDefault()可阻止页面默认跳转或刷新（常用于 AJAX 提交） - 表单数据可通过
event.target或直接访问form.elements、FormData获取
示例：
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
console.log('表单被提交了');
const data = new FormData(form);
// 后续可发送到服务器：fetch(..., { body: data })
});
使用 onsubmit 属性（内联或 JS 赋值）
兼容性好，但不推荐在复杂项目中使用，因为一个元素只能有一个 onsubmit 处理函数，后赋值会覆盖前一个：
- HTML 中写：
<form onsubmit="handleSubmit(event)"></form> - JS 中写：
form.onsubmit = function(event) { ... }; - 同样需要
event.preventDefault()来阻止默认行为
注意：不要监听 button 的 click 代替 submit
仅监听提交按钮的 click 事件是不完整的：
- 用户按回车键提交时，
click不会触发 - 通过
form.submit()方法提交时，也不会触发click -
submit事件才是语义正确、覆盖全面的时机
验证失败时阻止提交的典型模式
常配合表单验证使用：验证不通过就调用 preventDefault()，并提示用户：
form.addEventListener('submit', function(event) {
const email = form.email.value;
if (!email.includes('@')) {
alert('邮箱格式不正确');
event.preventDefault();
return;
}
// 验证通过，可继续处理（如发送请求）
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
