无感刷新本质是通过preventDefault()拦截表单submit事件实现的假象；浏览器默认会整页重载，必须在DOM就绪后监听form的submit事件并第一时间调用e.preventDefault()，否则页面必然刷新。
页面“无感刷新”本质是假象——浏览器要么整页重载（真刷新），要么根本不刷新（需主动拦截）。所谓无感，是指用户没察觉跳转或白屏，背后仍是 preventDefault() 拦截 + 自定义逻辑执行。
为什么 form 提交后总会跳转或刷新
HTML <form></form> 元素只要被触发提交（点按钮、按回车），浏览器就自动走标准流程：收集字段、发请求、用响应替换当前页面。哪怕你只写了 <form>
<input><button></button>
</form>，没有 action、没有 method，它也默认以 GET 提交到当前 URL，导致重载。
- 常见错误现象：输入后按 Enter，页面闪一下，所有 JS 变量（如
currentStreak、startTime）全归零 - 调试技巧：在提交函数开头加
console.log('submit caught')，如果没输出就刷走了，说明preventDefault()根本没绑上 - 根本原因常是 DOM 未就绪——脚本在
<form></form>解析前就执行了document.querySelector，结果找不到元素，监听器白注册
必须用 event.preventDefault() 绑定在 form 的 submit 事件上
不是按钮的 click，不是自定义函数里调 form.submit()，而是监听 <form></form> 自身的 submit 事件，并第一时间调 e.preventDefault()。
- 正确写法：
document.querySelector('#myForm').addEventListener('submit', e => { e.preventDefault(); /* 后续逻辑 */ }); - 错误写法：
document.querySelector('#submitBtn').addEventListener('submit', ...)（按钮没有submit事件） - 错误写法：
document.querySelector('#submitBtn').addEventListener('click', () => { myForm.submit(); })（绕过事件机制，preventDefault()失效） - 若使用外部按钮（
<button form="myForm"></button>），仍要监听#myForm的submit，不是监听按钮
表单字段值获取与后续处理建议
阻止刷新只是第一步；接下来你要手动取值、校验、提交（AJAX）、更新 UI。别依赖表单自动收集——它只在真提交时生效。
立即学习“前端免费学习笔记（深入）”；
- 取值用
document.getElementById('fieldId').value或form.elements['name'].value，别用new FormData(form)后再发 XHR（除非你真要发二进制） - 校验优先用 HTML5 原生属性（
required、type="email"、pattern），它们会在submit触发前自动检查，失败时不会进入你的 JS 逻辑 - AJAX 提交后，手动清空字段或更新 DOM，例如：
document.getElementById('msg').textContent = 'Submitted!'; - 若后端必须返回 HTML（比如旧系统），可用
<iframe name="hiddenFrame"></iframe>+form target="hiddenFrame"，但需确保 iframe 的name和 form 的target完全一致，且 iframe 不设src
最容易被忽略的是监听时机和作用对象：DOM 必须就绪，事件必须绑在 form 上，preventDefault() 必须在事件回调第一行。少一个环节，页面就照刷不误。
