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月.
submit 事件會在 <form> 被提交時觸發。
請注意 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 的屬性。
submitterRead only-
一個
HTMLElement物件，用來識別被呼叫以觸發表單提交的按鈕或其他元素。
範例
本範例使用 EventTarget.addEventListener() 監聽表單提交，並在發生時記錄當下的 Event.timeStamp，接著阻止提交表單的預設行為。
HTML
html
<form id="form">
<label>測試欄位：<input type="text" /></label>
<br /><br />
<button type="submit">提交表單</button>
</form>
<p id="log"></p>
JavaScript
js
const form = document.getElementById("form");
const log = document.getElementById("log");
function logSubmit(event) {
log.textContent = `表單已提交！時間戳記：${event.timeStamp}`;
event.preventDefault();
}
form.addEventListener("submit", logSubmit);
結果
規範
| Specification |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |