如何在不修改HTML的情況下用JavaScript監聽表單提交事件？

在不修改HTML 的情況下在JavaScript 中監聽表單提交事件

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

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

<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>

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

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

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

使用庫監聽提交事件

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

jQuery

<code class="javascript">$(ele).submit(callback);</code>

範例

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

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

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