Abhören von Formularsendeereignissen in JavaScript ohne HTML-Änderung

In diesem Artikel befassen wir uns mit der häufigen Herausforderung, Formularabsendeereignisse ohne zu überwachen den HTML-Code ändern zu müssen. Anstatt uns 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 in einem Formularelement auftritt.

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
}

Ersetzen Sie „ele“ durch den Verweis auf Ihr Formularelement und „callback“ durch die Funktion, die Sie beim Absenden des Formulars ausführen möchten.

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

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

Abhören von Übermittlungsereignissen mit Bibliotheken

Obwohl dies nicht unbedingt erforderlich ist, bevorzugen Sie möglicherweise die Verwendung einer Bibliothek zum Abhören von Übermittlungsereignissen. So können Sie dies mit gängigen Bibliotheken tun:

jQuery

$(ele).submit(callback);

Beispiel

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

Mit diesen Techniken können Sie Einfaches Abhören von Formularsendeereignissen in JavaScript, ohne den HTML-Code berühren zu müssen.