HTMLFormElement: submit 事件
当一个 <form> 被提交时，会触发 submit 事件。
请注意，submit 事件是在 <form> 元素本身上触发的，而不是在其内部的任何 <button> 或 <input type="submit"> 上触发。然而，用于指示表单提交操作已被触发的 SubmitEvent 包含一个 submitter 属性，该属性是用于触发提交请求的按钮。
当发生以下情况时，会触发 submit 事件：
- 用户单击 提交按钮；
- 用户在表单中的一个字段（例如，<input type="text">）中编辑时按下 Enter 键；
- 脚本调用
form.requestSubmit()方法。
但是，当脚本直接调用 form.submit() 方法时，不会向表单发送该事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("submit", (event) => { })
onsubmit = (event) => { }
事件类型
一个 SubmitEvent。继承自 Event。
事件属性
除了下面列出的属性外，此接口还继承了其父接口 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
const form = document.getElementById("form");
const log = document.getElementById("log");
function logSubmit(event) {
log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
event.preventDefault();
}
form.addEventListener("submit", logSubmit);
结果
规范
| 规范 |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |
浏览器兼容性
加载中…