如何在不使用 HTML 事件屬性的情況下監聽 JavaScript 中的表單提交事件？

在沒有HTML 事件屬性的JavaScript 中監聽表單提交事件

在Web 開發中，處理表單提交事件對於驗證使用者輸入和執行自訂操作至關重要。傳統上，開發人員使用 onSubmit 或 onClick 等 HTML 屬性來偵聽這些事件。但是，這種方法需要修改 HTML 程式碼，這可能不方便且容易出錯。

使用事件監聽器監聽

要在沒有 HTML 事件屬性的純 JavaScript 中監聽表單提交事件，請利用EventTarget 介面的 addEventListener() 方法。這允許您將事件偵聽器附加到表單元素，而無需修改其 HTML 標記。

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

每當提交表單時，都會執行 eventHandler 函式。您可以在此函數中執行驗證邏輯或其他自訂操作。

阻止預設表單提交

如果要阻止預設表單提交行為，請在事件上呼叫PreventDefault() 方法事件處理程序中的物件：

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

使用EventTarget.addEventListener

EventTarget.addEventListener 方法受到現代瀏覽器的廣泛支援。它提供了一個跨瀏覽器解決方案，用於偵聽各種 DOM 元素（包括表單元素）上的事件。

庫的替代方案

如果您喜歡使用庫，請考慮以下選項：

• jQuery: $(ele). submit(callback);
• React: const call = (event) =>; {};
• Vue : @submit="mySubmitHandler"

以上是如何在不使用 HTML 事件屬性的情況下監聽 JavaScript 中的表單提交事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！