JavaScript Academy · 课时

submit 事件

Q: 「submit 事件」这节课中我会学到什么？

处理表单提交并阻止页面重新加载。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理表单提交并阻止页面重新加载。

submit 事件 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

提交表单

表单发送时会触发 submit 事件，无论是点击提交按钮，还是在字段中按下 Enter。处理表单数据的正确位置就是这里。

在表单上监听

请将监听器附加到 form 元素本身，而不是提交按钮上，这样才能覆盖所有提交路径。

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

默认重新加载

默认情况下，提交表单会导致页面跳转或重新加载。对于由 JavaScript 驱动的应用，通常需要取消这一行为。

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

为什么要在这里使用 preventDefault

调用 preventDefault 可以让页面保持不变，以便您自行验证并发送数据，通常会通过 fetch 完成。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

提交按钮

带有 type="submit" 的 button（表单内部的默认类型）会触发表单提交。对于不应提交表单的按钮，请使用 type="button"。

按 Enter 提交

在单行文本字段中按下 Enter 会提交表单，因此必须在表单上进行监听。

requestSubmit

form.requestSubmit 会以编程方式提交表单，同时仍然触发提交事件并运行验证；而 form.submit 会跳过这两项。

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

在提交时读取数据

在处理程序内部，根据表单创建 FormData，即可整洁地收集所有带名称的字段。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

禁用按钮

为防止重复提交，请在处理期间禁用提交按钮，完成后再重新启用。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

重置表单

form.reset 会将字段清除并恢复为默认值，而 reset 事件则让您能够对此做出响应。

form.addEventListener("reset", () => {
  console.log("cleared");
});

提交者元素

提交事件的 submitter 属性会说明是哪个按钮触发了该事件。当表单有多个提交按钮时，这很有用。

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

快速检查

请选择最佳实践。

回顾

使用表单的 submit 事件处理提交，对于由 JS 驱动的应用，请调用 preventDefault。在表单上而不是按钮上进行监听，以捕获通过 Enter 键进行的提交。使用 FormData 读取字段，使用 requestSubmit 在验证的同时以编程方式提交，并禁用按钮以避免重复提交。

常见问题解答

「submit 事件」课时是免费的吗？

是的 — 「submit 事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「submit 事件」这节课中我会学到什么？

处理表单提交并阻止页面重新加载。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「submit 事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy