<button>不写type属性时默认为submit，会触发表单提交并刷新页面，必须显式声明type="button"等值以避免意外行为。
不写type的
只要
常见翻车现场：<form><button onclick="doSomething()">点我</button></form>，你以为弹窗，结果弹完页面就白了。
修复方式只有一条：所有，别赌浏览器“懂你”。
type="submit"触发的是submit事件，不是click事件
type="submit"的本质是表单生命周期参与者：它会自动收集同级<form>内所有带name的可提交控件（<input>、<select>、<textarea>），构造请求，发到action地址。即使<form>没写action，也会刷新页面。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 拦不住提交：给按钮绑
onclick并调e.preventDefault()，只能阻止click，不能阻止后续submit事件 - 必须监听
form的submit事件，并在那里面e.preventDefault() -
type="button"完全不触发submit，所以form.addEventListener('submit', ...)对它无效
type="reset"只还原HTML初始值，不是清空
type="reset"的作用非常窄：它只把<input value="张三">这类控件的value或checked属性设回 DOM 加载时的值（即 HTML 标签里写的值），不是 JS 设置的值，也不是defaultValue。
这意味着：
- 用
input.value = "新值"改的，reset后还是“张三” - Vue 的
v-model、React 的useState更新的值，reset完全无视 - 没写
value的<input>，初始为空，reset后就是空字符串 - 它不会触发
change或input事件，依赖这些事件更新 UI 的逻辑不会响应
非法type值会被降级，但行为不可靠
浏览器只认submit、reset、button这三个合法值。其他任何值，比如type="click"、type=""、type="primary"，都会降级：
- 在
<form>内：一律当submit处理（可能意外提交） - 在
<form>外：降级为button（静默，不报错） - 框架动态渲染（如 React 插入未带
type的<button>）时，这种降级最难排查
真正容易出问题的，不是记不住三者区别，而是嵌套结构下漏掉type，或者以为reset能抹掉 JS 状态。
