HTMLFormElement：submit 事件

基线 广泛可用

此功能已得到充分确立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

当 <form> 提交时，会触发 submit 事件。

请注意，submit 事件在 <form> 元素本身触发，而不是在其中的任何 <button> 或 <input type="submit"> 上触发。但是，发送以指示表单提交操作已触发的 SubmitEvent 包含一个 submitter 属性，该属性是用于触发提交请求的按钮。

submit 事件在以下情况下触发：

但是，当脚本直接调用 form.submit() 方法时，不会将事件发送到表单。

注意：尝试提交未通过 验证 的表单会触发 invalid 事件。在这种情况下，验证会阻止表单提交，因此不会发生 submit 事件。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("submit", (event) => {});

onsubmit = (event) => {};

事件类型

一个 SubmitEvent。继承自 Event。

Event SubmitEvent

事件属性

除了下面列出的属性之外，此接口还继承其父接口 Event 的属性。

submitter 只读

一个 HTMLElement 对象，用于识别用于触发表单提交的按钮或其他元素。

示例

此示例使用 EventTarget.addEventListener() 侦听表单提交，并在每次发生提交时记录当前 Event.timeStamp，然后阻止提交表单的默认操作。

HTML

html
<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

JavaScript

js
function logSubmit(event) {
  log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);

结果

规范

规范
HTML 标准
# event-submit
HTML 标准
# handler-onsubmit

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅