reset事件仅在用户点击type="reset"按钮或调用form.reset()时触发，不响应页面加载、初始化或JS手动赋值；监听必须绑定到<form>元素，使用addEventListener('reset')而非onreset属性，且event.preventDefault()无效。
表单重置事件监听不到？先确认 reset 事件触发时机
HTML 表单的 reset 事件只在用户点击 <input type="reset"> 或调用 form.reset() 时触发，**不会**在页面加载、表单初始化或 JS 手动恢复字段值时触发。很多开发者误以为修改了 value 属性后重置会触发该事件，其实不会——只有原生重置行为才派发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保监听的是
<form>元素，不是某个 input；reset是表单级事件，不冒泡到子元素 - 用
addEventListener('reset', handler)，不要用onreset属性（它无法阻止默认行为） - 如果表单是动态插入的，需在插入后立即绑定，或使用事件委托（但注意：
reset不冒泡，委托无效）
event.preventDefault() 在 reset 事件里没用？这是设计使然
reset 事件是不可取消的：调用 event.preventDefault() 对它完全无效。浏览器会在事件处理函数执行完毕后，**强制重置所有表单控件为初始值**（即 HTML 中写的 value、checked、selected 等）。这意味着你无法“阻止”重置本身，只能在重置发生前或后做些事。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若想保留某些字段不被重置，得提前备份关键字段值，在
reset事件回调里手动恢复（重置后立刻赋值） - 避免在
reset里做异步操作（如fetch），因为重置已发生，用户看到的是瞬间变化 - 别试图用
event.stopPropagation()—— 它本就不冒泡，无意义
如何在重置后恢复动态设置的值（比如 JS 修改过的 value）
浏览器只认 HTML 初始属性值作为“重置目标”，JS 动态改的 input.value 不会被记录。所以重置后，那些字段会回到初始 HTML 值，而非你代码里设过的值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在表单初始化时，用
dataset或闭包变量缓存你期望的“逻辑初始值”：const form = document.querySelector('form'); const initialValues = {}; for (const input of form.elements) { if (input.name) { initialValues[input.name] = input.dataset.initialValue || input.value; } } - 在
reset回调中，遍历initialValues并重新赋值：form.addEventListener('reset', () => { setTimeout(() => { Object.entries(initialValues).forEach(([name, val]) => { const el = form[name]; if (el && el.value !== undefined) el.value = val; }); }, 0); });（加setTimeout是因为重置 DOM 更新是同步的，但某些框架/自定义控件可能需要微任务时机） - 对
checkbox、radio、select要分别处理checked和selected属性，不能只设value
Vue/React 项目里监听原生 reset 事件容易漏掉什么
现代框架常接管表单状态，导致原生 reset 行为与组件 state 不同步。比如 Vue 的 v-model 绑定字段，点击原生 reset 按钮后 DOM 值变了，但组件 data 没更新；反之亦然。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Vue 中，优先用
@reset.prevent阻止默认行为，然后手动重置 data，并调用$nextTick同步 DOM - 在 React 中，避免混用受控/非受控输入；若用了原生
reset，务必在事件回调里同步setState，否则 UI 和 state 会撕裂 - 统一用 JS 触发重置（
form.reset()）比依赖用户点击更可控，尤其在测试或自动化场景下
