推荐监听表单的reset事件，它覆盖所有重置场景且在控件值还原前触发，可执行自定义逻辑；而click事件仅响应按钮点击，无法捕获js调用reset()等其他重置方式。
直接监听重置按钮的 click 事件是可行的，但更可靠的方式是监听表单的 reset 事件——它不仅响应点击重置按钮，还覆盖通过 JavaScript 调用 form.reset() 或按 Enter 键触发表单提交后浏览器自动重置等所有重置场景。
监听表单的 reset 事件（推荐）
表单元素原生支持 reset 事件，该事件在表单被重置时触发，且**在表单控件值真正被还原之前**发生，因此你可以在重置完成前执行自定义逻辑（比如确认、日志记录或保存临时状态）。
- 使用
addEventListener绑定到<form></form>元素上 - 注意：该事件无法被取消（
event.preventDefault()无效），但你可以选择是否继续让浏览器执行默认重置行为 - 如果需阻止重置，应在事件中调用
event.preventDefault()并手动处理（但通常不建议完全禁用重置逻辑）
示例：
const form = document.querySelector('form');
form.addEventListener('reset', function (e) {
console.log('表单即将被重置');
// 可在此处提示用户、清空关联 UI、重置外部状态等
});
监听重置按钮的 click 事件（仅限按钮点击）
如果你只关心用户点击了 <button type="reset"></button> 或 <input type="reset">，可单独监听该按钮的 click 事件。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 适用于需要区分“点击重置”和“代码调用 reset()”的场景
- 注意：该方式不会捕获通过 JS 调用
form.reset()引发的重置 - 若按钮是动态插入的，建议用事件委托绑定到父容器
示例：
const resetBtn = document.querySelector('button[type="reset"], input[type="reset"]');
resetBtn?.addEventListener('click', function (e) {
console.log('用户点击了重置按钮');
// 可弹出确认框等交互
if (!confirm('确定要重置表单吗？')) {
e.preventDefault(); // 阻止表单重置（仅对 button/input type="reset" 有效）
}
});
注意事项与常见问题
以下几点容易被忽略，但会影响监听效果：
-
事件触发时机：reset 事件在表单控件值被还原前触发；此时
input.value等仍为重置前的值，适合做清理或备份 -
阻止默认行为：在
reset事件中调用e.preventDefault()可阻止浏览器重置操作；在click事件中调用则只阻止本次点击引发的重置 - 动态表单：若表单是后续插入 DOM 的，需确保事件监听器在元素存在后再绑定，或使用事件委托
- 兼容性：reset 事件在所有现代浏览器及 IE9+ 中均支持，无需 polyfill
补充：如何在重置后执行操作？
reset 事件本身不提供“重置后”的钩子。如需在重置完成后再执行逻辑（例如聚焦第一个字段），可使用 setTimeout 延迟执行：
form.addEventListener('reset', function () {
setTimeout(() => {
const firstInput = form.querySelector('input, select, textarea');
firstInput?.focus();
}, 0);
});
这是因为重置操作是同步完成的，微任务队列中的回调会在重置后立即执行。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
