在JavaScript 中監聽表單提交事件而不修改HTML

在本文中，我們解決了在不修改HTML 的情況下監聽表單提交事件的常見挑戰必須修改HTML 程式碼。我們不依賴 HTML 中的 onClick 或 onSubmit 屬性，而是提供純 JavaScript 解決方案。

為了實現這一點，我們利用 EventTarget.addEventListener 方法。此方法允許我們註冊一個回調函數，當表單元素上發生特定事件時將執行該回呼函數。

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
}

將「ele」替換為對表單元素的引用，並將「callback」替換為提交表單時要執行的函數。

防止本機表單提交行為（即，刷新頁面），在回呼函數中使用.preventDefault() 方法：

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

使用庫監聽提交事件

雖然沒有必要，但您可能更喜歡使用庫監聽提交事件。以下是使用常用函式庫的方法：

jQuery

$(ele).submit(callback);

範例

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

透過使用這些技術，您可以輕鬆監聽JavaScript 中的表單提交事件，而無需接觸HTML 程式碼。