reset事件仅在javascript调用form.reset()且表单有脏状态时触发，点击type="reset"按钮不触发；它不可取消，无法用于拦截重置；form.reset()仅恢复html初始值，不响应js动态设置的值，框架中应避免使用原生reset。
reset 事件根本不会在用户点按钮时触发
浏览器点击 <input type="reset"> 或 <button type="reset"></button> 时，reset 事件**不会派发**——这不是 bug，是 HTML 规范明确规定的。它只在 JavaScript 显式调用 form.reset() 后、且表单存在“脏状态”（即字段被修改过）时才可能触发。
常见错误现象：
- 给
form绑了addEventListener('reset', ...)，点重置按钮后回调没执行 - 写了
onreset="console.log('触发了')"，但控制台始终沉默 - 试图在该事件里
e.preventDefault()阻止重置——语法合法但实际无效，因为reset事件本身不可取消
真正能拦截用户点击意图的，只有按钮自身的 click 事件。
想弹确认框？必须用 button[type="button"] + preventDefault
原生 type="reset" 按钮不支持可靠拦截；onclick 在部分浏览器中会触发，但行为不一致，不能依赖。唯一可控路径是：把按钮改成 type="button"，手动接管逻辑。
实操建议：
- HTML 中写：
<button type="button" data-action="reset">重置</button> - JS 中监听 click：
document.querySelector('[data-action="reset"]').addEventListener('click', e => { e.preventDefault(); if (confirm('确定清空？')) form.reset(); }) - 若用自定义弹窗（如
<dialog></dialog>或 UI 库 Modal），确保重置调用放在await showConfirm()或.then()内部，否则会同步执行、失去阻断效果 - 别在
reset事件里写确认逻辑——它发生在重置之后，用户看到的是已清空的表单
form.reset() 只认 HTML 初始值，不是你 JS 设的值
form.reset() 不读取当前 DOM 的 value、checked 或 selectedIndex，它只回退到页面加载时各元素的 defaultValue、defaultChecked、defaultSelected 等属性值。
这意味着：
-
<input value="初始文本">→ JS 改成input.value = "新内容"→reset()后变回“初始文本” -
<input>没写value属性 → JS 设了input.value = "xxx"→reset()后变空（因defaultValue是空字符串） -
<select></select>的selectedIndex被 JS 改过，但没设<option selected></option>→reset()后可能停在错误选项 -
<input type="file">的文件列表完全不受reset()影响，必须手动清空：fileInput.value = ''
如果默认值来自配置或接口，硬塞 defaultValue 不现实，这时应放弃 reset()，改用 JS 手动赋值还原。
Vue/React 项目里别碰原生 reset 事件
框架的响应式状态和 DOM 值常不同步：form.reset() 只改 DOM，不更新 v-model 或 useState，导致视图与数据错位。
正确做法：
- 用普通
type="button"，点击后直接重置状态变量，例如 Vue 中this.form = { ...this.initialForm } - 确保
initialForm是深拷贝，避免引用污染 - 富文本编辑器、日期选择器等自定义组件，必须在点击回调里单独清理，
reset()对它们完全无效 - 原生
reset事件在框架中既难监听又难控制，属于可完全绕过的旧路径
真实项目里最常被忽略的，是 input type="file" 和动态插入字段的清理——它们根本不在 reset() 的作用域内，必须显式处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
