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 |
瀏覽器相容性
載入中…