本文详解 javascript 表单提交事件监听失败的两大常见原因：元素 id 绑定错误（id 在 div 而非 form 标签上）和未调用 `event.preventdefault()` 导致页面自动刷新，从而中断脚本执行、隐藏 console 输出。
在前端开发中，初学者常遇到“点击按钮后 console.log 不显示”的问题——表面看代码逻辑正常，但控制台始终沉默。根本原因往往不是语法错误，而是对 HTML 结构与事件行为的理解偏差。
? 问题定位：ID 绑定错位 + 默认行为干扰
原始代码中，JavaScript 尝试通过 document.getElementById('Formulario') 获取表单元素：
const cadForm = document.getElementById('Formulario');但查看 HTML 片段可见：
⚠️ 关键错误：id="Formulario" 实际位于
内部，而非
第二步：在事件监听器中调用 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 属性是否直接写在
- ✅ 表单提交事件必须绑定到
- ✅ submit 事件处理器中务必调用 event.preventDefault()，否则页面刷新将终止 JS 执行；
- ✅ 避免使用全局变量/函数名（如 alert, open, location）作为自定义标识符；
- ✅ 使用浏览器开发者工具的 Elements 面板实时验证 DOM 结构，用 Console 面板检查报错信息。
遵循以上原则，即可稳定触发表单事件、可靠输出调试日志，并为后续集成 SweetAlert2 等交互逻辑打下坚实基础。
