首頁 >web前端 >js教程 >除了 HTML 屬性之外,如何在 Javascript 中監聽表單提交事件?

除了 HTML 屬性之外,如何在 Javascript 中監聽表單提交事件?

Patricia Arquette
Patricia Arquette原創
2024-10-27 06:34:03350瀏覽

 How Do I Listen to Form Submit Events in Javascript Beyond HTML Attributes?

在Javascript 中監聽表單提交事件:超越HTML 屬性

偵測Javascript 中表單的提交對於驗證使用者輸入和驗證表單至關重要控製表單行為。雖然使用 onClick 和 onSubmit 等 HTML 屬性就足夠了,但它限制了自訂和靈活性。本文探討了使用純 Javascript 和通用庫監聽表單提交事件的替代方法。

純Javascript 方法

要將事件監聽器附加到表單元素,請使用addEventListener或基於瀏覽器支援的attachEvent:

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent("onsubmit", callback); // Old IE
}</code>

要取消本機提交事件,請在回呼函數中使用preventDefault():
<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});</code>

函式庫方法

如果首選使用函式庫(例如jQuery):
  • jQuery:
<code class="javascript">$(ele).submit(callback);</code>

Cross -瀏覽器相容性

以上是除了 HTML 屬性之外,如何在 Javascript 中監聽表單提交事件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn