onreset事件仅在用户点击type=”reset”按钮时触发，不响应form.reset()调用；preventdefault无效，需拦截按钮点击；addeventlistener用’reset’而非’onreset’；现代框架中多自行管理状态。
onreset 事件什么时候会触发
只有用户主动点击表单内的 <input type="reset"> 或 <button type="reset"></button> 时，onreset 才会执行。它不会响应 JavaScript 调用的 form.reset() 方法 —— 这点很多人踩坑，以为只要表单重置就触发，结果调试半天没反应。
- 用户手动点重置按钮 → 触发
onreset -
form.reset()调用 → 不触发onreset（这是规范行为，不是 bug） - 表单提交后浏览器自动清空（比如某些老式 GET 表单）→ 不触发
onreset
内联 onreset 和 addEventListener 的区别
直接写 onreset="handleReset()" 是最简方式，但只能绑定一个处理函数；用 addEventListener('reset', ...) 支持多个监听器，也更容易解绑。注意事件名是 'reset'，不是 'onreset' —— 写错就完全不生效。
- 内联写法：
<form onreset="console.log('reset!')"></form>，适合快速验证 - js 绑定：
form.addEventListener('reset', e => { e.preventDefault(); })，可阻止默认行为 - 错误写法：
form.addEventListener('onreset', ...)→ 无效，别加on
为什么 preventDefault() 在 reset 事件里经常失效
onreset 和 reset 事件本身**无法被取消** —— e.preventDefault() 对它没作用。想阻止重置，必须提前拦截用户操作，比如禁用重置按钮、或监听按钮点击并 return false。
- 在
reset事件回调里调e.preventDefault()→ 控制台无报错，但表单照常重置 - 正确做法：给
<button type="reset"></button>绑onclick="return confirm('确定要重置？')" - 或者用 JS 动态控制：
button.addEventListener('click', e => { if (!shouldReset) e.preventDefault(); })
兼容性与现代替代方案
onreset 属性和 reset 事件在所有主流浏览器都支持，包括 IE9+。但实际项目中，纯前端表单越来越依赖 React/Vue 等框架，它们通常自己管理状态，根本不用原生 reset 行为 —— 所以真正在意这个事件的，往往是维护老系统或做无障碍适配的场景。
立即学习“前端免费学习笔记（深入）”；
- Vue 中：
@reset指令不生效，得用@click拦截重置按钮 - React 中：没有
onReset合成事件，同样需处理按钮点击 - 无障碍注意：屏幕阅读器会把
type="reset"读作“重置按钮”，别用它实现“清空搜索”之类非标准语义
事情说清了就结束。真正难的不是怎么写 onreset，而是想清楚：这个重置操作，是不是真的该由浏览器来干。