reset事件仅触发不重置，真正重置靠form.reset()方法；它恢复字段为html初始属性值，不依赖js，禁用js时仍有效；可监听reset事件做自定义处理但无法阻止默认重置。
在 JavaScript 中，reset 事件本身不会重置表单内容，它只是在用户点击表单内的重置按钮（<input type="reset"> 或 <button type="reset"></button>）时被触发。真正执行重置操作的是浏览器对 form.reset() 方法的默认行为。
表单重置的本质是调用 form.reset()
浏览器原生的重置机制依赖于 HTMLFormElement.reset() 方法。只要表单有合法的 <form></form> 标签，且其中包含可重置的表单控件（如 input、select、textarea），调用该方法就会将所有字段恢复为初始 HTML 中设定的 value、checked、selected 等状态。
- 重置不依赖 JavaScript —— 即使禁用 JS，
<input type="reset">仍有效 - 初始值指 HTML 加载时的属性值（例如
<input value="默认名">），不是 JS 后续设置的.value - 动态添加的字段（JS 创建后 append 到 form）会被重置，前提是它们已存在于 DOM 中且属于该 form
监听 reset 事件做自定义处理
如果你想在重置发生前或后执行额外逻辑（比如清空非表单元素、记录日志、取消异步请求），可以监听表单的 reset 事件：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const myForm = document.querySelector('#myForm');
myForm.addEventListener('reset', function(e) {
// e.preventDefault() 可阻止默认重置行为（慎用！）
console.log('表单即将被重置');
// ✅ 适合：清理关联的 UI 状态、关闭弹窗、重置验证样式
// ❌ 不适合：手动 set value —— 因为 reset() 会立刻覆盖它
});
注意：reset 是冒泡事件，但无法通过 e.preventDefault() 阻止字段重置（这是浏览器规范行为）。若需完全自定义重置逻辑，应避免使用原生 reset 按钮，改用普通按钮 + 手动赋值。
手动重置表单（绕过初始值限制）
当需要重置为“空值”而非 HTML 初始值时（例如所有输入框清空、单选框取消选中），可手动遍历控件并设值：
function clearForm(form) {
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
switch(el.type) {
case 'checkbox':
case 'radio':
el.checked = false;
break;
case 'select-multiple':
Array.from(el.options).forEach(opt => opt.selected = false);
break;
default:
el.value = '';
}
});
}
// 使用示例
document.querySelector('#clearBtn').addEventListener('click', () => {
clearForm(document.getElementById('myForm'));
});
这种方式更灵活，但需自行维护逻辑；而原生 form.reset() 更简洁、符合语义，且自动处理 date、color、file 等特殊类型。
常见误区提醒
- 不要给 reset 按钮绑定 click 并手动调用 reset() —— 它本就自带该行为，多此一举
-
动态修改过 input.value 的 JS 值，reset 不会还原它 —— 除非你同时更新了
input.setAttribute('value', newValue) -
没有
<form></form>包裹的独立 input 无法被 reset() —— 必须属于一个表单元素 - disabled 字段不会被 reset() 修改，但 readonly 字段会
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
