本文详解 javascript 表单提交事件监听失败的两大常见原因：元素 id 绑定错误（id 在 div 而非 form 标签上）和未调用 `event.preventdefault()` 导致页面自动刷新，从而中断脚本执行、隐藏 console 输出。
在前端开发中，初学者常遇到“点击按钮后 console.log 不显示”的问题——表面看代码逻辑正常，但控制台始终沉默。根本原因往往不是语法错误，而是对 HTML 结构与事件行为的理解偏差。
? 问题定位：ID 绑定错位 + 默认行为干扰
原始代码中，JavaScript 尝试通过 document.getElementById('Formulario') 获取表单元素：
const cadForm = document.getElementById('Formulario');但查看 HTML 片段可见：
<div class="form first" id="Formulario"> <!-- ❌ ID 在 div 上 --> <!-- ...input 字段... --> <button type="submit">Submit</button> </div>
⚠️ 关键错误：id="Formulario" 实际位于 <div> 内部，而非 <form> 标签上。而 submit 事件只能被 <form> 元素原生触发。因此 cadForm.addEventListener("submit", ...) 实际绑定失败（cadForm 是一个 div，不支持 submit 事件），导致回调函数从未执行。
此外，即使成功绑定，浏览器对 <form> 的默认行为是提交后跳转或刷新页面。若未显式阻止，脚本会在 console.log("Success") 执行前就被中断，控制台自然看不到输出。
✅ 正确解法：修正结构 + 阻止默认行为
第一步：将 id="Formulario" 移至 <form> 标签
<form action="#" id="Formulario"> <!-- ✅ 正确位置 -->
<div class="form first">
<!-- ...原有内容不变... -->
</div>
</form>第二步：在事件监听器中调用 e.preventDefault()
const cadForm = document.getElementById('Formulario');
if (cadForm) {
cadForm.addEventListener("submit", (e) => {
e.preventDefault(); // ✅ 阻止页面刷新，确保后续代码执行
console.log("Success"); // 现在能稳定输出到控制台
// 可在此处添加 Swal.fire() 或其他业务逻辑
});
}? 提示：async 关键字在此场景中非必需（无 await 操作），可简化为普通箭头函数；若后续需异步校验（如 API 请求），再补充 async/await。
? 补充说明：关于 alert() 函数命名冲突
原始代码定义了名为 alert 的函数：
function alert(){ ... }这会覆盖全局 window.alert 方法，虽不影响当前逻辑，但属于高危命名习惯，易引发不可预知错误。建议重命名为语义化名称，例如：
function showVehicleNotFoundAlert() {
Swal.fire({ /* ... */ });
}? 总结：表单调试 Checklist
- ✅ 确认 id 属性是否直接写在 <form> 标签上（而非其子容器）；
- ✅ 表单提交事件必须绑定到 <form> 元素，而非按钮或 div；
- ✅ submit 事件处理器中务必调用 event.preventDefault()，否则页面刷新将终止 JS 执行；
- ✅ 避免使用全局变量/函数名（如 alert, open, location）作为自定义标识符；
- ✅ 使用浏览器开发者工具的 Elements 面板实时验证 DOM 结构，用 Console 面板检查报错信息。
遵循以上原则，即可稳定触发表单事件、可靠输出调试日志，并为后续集成 SweetAlert2 等交互逻辑打下坚实基础。
