此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
HTMLFormElement: submit event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
当表单 <form> 提交的时候触发 submit 事件。
| 是否冒泡 | 是(虽然其通常被看作不冒泡的简单事件) |
|---|---|
| 是否可取消 | 是 |
| 接口 | SubmitEvent |
| 事件处理器属性 | GlobalEventHandlers.onsubmit |
注意 submit 事件只能作用于 <form> 元素本身,不能作用于 <button> 或者 <input type="submit">。但 SubmitEvent 被用于表单提交时,会携带 submitter 属性,这是触发提交请求时会调用的按钮。
当用户点击提交按钮(<button> 或 <input type="submit">),亦或是在表单里输入时(e.g. <input type="text">)按下 Enter 键,submit 事件将会被触发。直接调用 form.submit() 方法时,事件不会发送到表单。
示例
这个示例使用 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! Time stamp: ${event.timeStamp}`;
event.preventDefault();
}
const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);
结果
[フレーム]
规范
| Specification |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |
浏览器兼容性
Loading...