怎么给 <form></form> 绑定提交处理函数
直接在 <form></form> 标签上用 onsubmit 属性最简单，但更推荐用 JavaScript 的 addEventListener 动态绑定——避免内联脚本、方便复用和测试。
- 用
onsubmit="handleSubmit(event); return false;"会阻止默认提交，但混入 HTML 不利于维护 - 用
form.addEventListener('submit', handleSubmit)是主流做法，event.preventDefault()在函数里调用更清晰 - 必须调用
event.preventDefault()，否则浏览器会跳转或刷新页面，你的 JS 逻辑根本没机会执行 - 别漏掉
event参数，否则拿不到表单数据，也调不了preventDefault
event.target 和 event.currentTarget 哪个才是表单
在 submit 事件监听器里，event.target 是触发事件的元素（比如某个按钮），而 event.currentTarget 才是绑定监听器的那个 <form></form> 元素。90% 的场景你应该用后者。
- 如果表单里有多个提交按钮（如“保存”“另存为”），
event.target可能是按钮，不是表单本身 - 用
event.currentTarget才能安全调用querySelector或elements获取所有字段 - 示例：
const form = event.currentTarget; const data = new FormData(form);
用 FormData 读取表单值时容易出错的点
FormData 看似自动收集，但字段名缺失、类型不匹配、禁用字段被忽略等问题很常见。
- 每个
<input>必须有name属性，否则FormData完全收不到它 -
disabled的字段不会被包含，哪怕你视觉上看到它填了内容 - 多选
<select multiple></select>需要循环遍历getAll()，get()只返回第一个选中项 - 上传文件时，
FormData能直接传File对象，但后端接收方式得匹配（比如 Express 需multer）
原生表单提交 vs fetch 提交的区别在哪
原生提交会整页跳转或刷新；用 fetch 提交能控制流程、做校验、加 loading，但得手动处理响应和错误。
立即学习“前端免费学习笔记（深入）”；
- 原生提交：浏览器自动序列化、发请求、跳转，适合简单场景或 SEO 敏感页
-
fetch提交：要用FormData或JSON.stringify构造数据，设置Content-Type（FormData会自动设为multipart/form-data，JSON 则需手动设application/json） - 注意
fetch不会自动带 cookie，跨域时要加credentials: 'include' - 服务器返回 4xx/5xx 时，
fetch不会抛错，得手动检查response.ok
