onreset事件只在JavaScript调用form.reset()时触发，而非用户点击重置按钮时；需监听按钮click并preventDefault后手动reset才能可靠捕获用户操作。
onreset 事件根本不会在点击重置按钮时触发？
不是你的代码写错了，是浏览器行为变了——现代浏览器中，onreset 属性（或 addEventListener('reset', ...)）**只在表单被 JavaScript 主动调用 form.reset() 时触发**，而不是用户点击 <input type="reset"> 或 <button type="reset"> 时。这是 HTML 规范明确规定的：重置按钮的点击本身不触发 reset 事件，它只执行表单重置逻辑，之后才派发事件；但若重置前表单未被修改（即 form.checkValidity() 为 true 且无脏数据），部分浏览器（Chrome 90+、Firefox 88+）会跳过事件派发。
想监听“用户点了重置按钮”，该用什么？
必须退回到按钮级监听，不能依赖表单的 reset 事件。最可靠的方式是给重置按钮绑定 click 事件，并阻止默认行为后手动调用 form.reset()，这样你就能完全掌控时机：
const resetBtn = document.querySelector('button[type="reset"], input[type="reset"]');
const form = document.querySelector('form');
resetBtn?.addEventListener('click', (e) => {
e.preventDefault(); // 阻止浏览器自动重置
console.log('用户点了重置按钮');
form.reset(); // 手动触发，此时 onreset 会被触发（如果已注册）
});
- 必须用
e.preventDefault()，否则两次重置（浏览器一次 + 你手动一次） - 如果表单有自定义验证逻辑或需要清空富文本编辑器、文件输入框等非原生控件，这一步是唯一可控入口
- 注意：
form.reset()不会重置通过 JavaScript 动态设置的value（如input.value = 'xxx'），只还原到初始 HTML 的value或defaultValue
onreset 属性和 addEventListener('reset') 的区别
两者触发条件一致，但注册方式影响可维护性与调试体验：
-
onreset是 DOM 属性，只能绑定一个处理函数，后赋值会覆盖前一个 -
addEventListener('reset', handler)支持多个监听器，推荐用于复杂表单 - 无论哪种，都只在
form.reset()被调用后触发，且**不带事件对象的isTrusted属性**（始终为false），无法区分是 JS 调用还是用户操作触发 - 如果你需要区分来源，只能靠上面的按钮
click监听 + 标志位配合
重置后表单状态异常？检查这几个点
常见表现：输入框清空了，但 select 还停在当前选项、checkbox 仍勾选、自定义组件没恢复。原因通常是：
-
select的默认选中靠<option selected>，若 JS 动态改过selectedIndex或value，form.reset()只认 HTML 初始状态，不认 JS 修改 -
input[type="file"]的value是只读的，reset()后显示为空，但实际 DOM 中files对象可能还存在（需手动清空input.files = null） - 使用 Vue/React 等框架时，表单控件常为受控组件，
form.reset()不会更新组件 state，必须同步调用setState或ref.value = defaultValue - 某些 UI 库（如 Element Plus、Ant Design）的表单封装会拦截原生重置逻辑，得查其文档找
resetFields()类方法
真正难的不是监听重置动作，而是确保重置后所有状态（DOM、JS、框架层）真正归零——这点容易被忽略，直到 QA 提出「点了重置，下拉框还是上次选的」才反应过来。
