如何正确绑定表单提交事件并防止页面刷新以输出 console.log

本文详解 javascript 表单提交事件监听失败的两大常见原因：元素 id 绑定错误（id 在 div 而非 form 标签上）和未调用 `event.preventdefault()` 导致页面自动刷新，从而中断脚本执行、隐藏 console 输出。

在前端开发中，初学者常遇到“点击按钮后 console.log 不显示”的问题——表面看代码逻辑正常，但控制台始终沉默。根本原因往往不是语法错误，而是对 HTML 结构与事件行为的理解偏差。

? 问题定位：ID 绑定错位 + 默认行为干扰

原始代码中，JavaScript 尝试通过 document.getElementById('Formulario') 获取表单元素：

const cadForm = document.getElementById('Formulario');

但查看 HTML 片段可见：

 
  
  Submit

⚠️ 关键错误：id="Formulario" 实际位于

内部，而非

标签上。而 submit 事件只能被 元素原生触发

。因此 cadForm.addEventListener("submit", ...) 实际绑定失败（cadForm 是一个 div，不支持 submit 事件），导致回调函数从未执行。

此外，即使成功绑定，浏览器对

的默认行为是提交后跳转或刷新页面。若未显式阻止，脚本会在 console.log("Success") 执行前就被中断，控制台自然看不到输出。

✅ 正确解法：修正结构 + 阻止默认行为

第一步：将 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 属性是否直接写在
  标签上（而非其子容器）；
• ✅ 表单提交事件必须绑定到
  元素，而非按钮或 div；
• ✅ submit 事件处理器中务必调用 event.preventDefault()，否则页面刷新将终止 JS 执行；
• ✅ 避免使用全局变量/函数名（如 alert, open, location）作为自定义标识符；
• ✅ 使用浏览器开发者工具的 Elements 面板实时验证 DOM 结构，用 Console 面板检查报错信息。

遵循以上原则，即可稳定触发表单事件、可靠输出调试日志，并为后续集成 SweetAlert2 等交互逻辑打下坚实基础。