Wie kann ich Formularübermittlungsereignisse in JavaScript abhören, ohne HTML zu ändern?

Abhören von Formularsendeereignissen in JavaScript, ohne HTML zu ändern

In diesem Artikel befassen wir uns mit der häufigen Herausforderung des Abhörens von Formularsendeereignissen ohne den HTML-Code ändern zu müssen. Anstatt sich auf die Attribute onClick oder onSubmit in HTML zu verlassen, bieten wir eine reine JavaScript-Lösung.

Um dies zu erreichen, nutzen wir die Methode EventTarget.addEventListener. Mit dieser Methode können wir eine Rückruffunktion registrieren, die ausgeführt wird, wenn ein bestimmtes Ereignis auf einem Formularelement auftritt.

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

Ersetzen Sie „ele“ durch den Verweis auf Ihr Formularelement und „callback“ durch die Funktion Sie möchten ausführen, wenn das Formular übermittelt wird.

Um das native Formularübermittlungsverhalten (d. h. das Aktualisieren der Seite) zu verhindern, verwenden Sie die Methode .preventDefault() in Ihrer Rückruffunktion:

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

Abhören von Übermittlungsereignissen mit Bibliotheken

Obwohl dies nicht notwendig ist, können Sie es vorziehen, eine Bibliothek zum Abhören von Übermittlungsereignissen zu verwenden. So können Sie es mit gängigen Bibliotheken machen:

jQuery

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

Beispiel

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

Mit diesen Techniken können Sie ganz einfach Formularübermittlungsereignisse in JavaScript abhören, ohne den HTML-Code berühren zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich Formularübermittlungsereignisse in JavaScript abhören, ohne HTML zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!