如何在不修改 HTML 的情況下偵測 JavaScript 中的表單提交事件？

在沒有HTML 標記的情況下檢測表單提交事件

在JavaScript 中，一項常見任務涉及在提交表單之前驗證表單。傳統上，這是透過使用 onSubmit 和 onClick 等 HTML 屬性來實現的。但是，要在不更改 HTML 程式碼的情況下建立獨立的驗證庫，您需要更好的方法。

解決方案在於在 JavaScript 中本地監聽表單的提交事件。具體操作方法如下：

<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 是您要在表單提交時執行的函數。

事件傳播

要完全理解此程式碼，了解事件傳播非常重要。考慮以下 HTML：

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

點擊提交按鈕時，會觸發「提交」事件。事件在 DOM 樹中冒泡，從按鈕開始，到表單元素結束。透過偵聽表單本身的提交事件 (ele.addEventListener('submit'))，我們在事件沿著樹向上傳播時捕獲該事件。

防止預設表單提交

如果您希望在表單提交時執行自訂操作（例如驗證），您可以使用PreventDefault() 來阻止瀏覽器的預設提交行為。

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

在上面的程式碼中，如果 isValid 為 false ，表單提交被封鎖。

函式庫整合

雖然首選使用原生 JavaScript，但有些開發人員更喜歡函式庫。以下是如何使用流行的庫監聽表單提交事件：

• jQuery: $(ele).submit(callback);
• Prototype : ele.observe('提交', 回調);
• MooTools: ele.addEvent('提交', 回呼);

透過了解🎜>透過了解事件傳播並利用本機addEventListener 或函式庫集成，您可以有效地偵聽JavaScript 中的表單提交事件，而無需修改HTML 程式碼。

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