Wie kann ich Formularsendeereignisse in JavaScript abhören, ohne HTML-Ereignisattribute zu verwenden?

Abhören von Formularübermittlungsereignissen in JavaScript ohne HTML-Ereignisattribute

In der Webentwicklung ist die Verarbeitung von Formularübermittlungsereignissen für die Validierung von Benutzereingaben und die Durchführung benutzerdefinierter Aktionen von entscheidender Bedeutung. Traditionell haben Entwickler HTML-Attribute wie onSubmit oder onClick verwendet, um auf diese Ereignisse zu warten. Dieser Ansatz erfordert jedoch eine Änderung des HTML-Codes, was umständlich und fehleranfällig sein kann.

Abhören mit Ereignis-Listenern

Um Formularübermittlungsereignisse in reinem JavaScript ohne HTML-Ereignisattribute abzuhören, nutzen Sie die Funktion die addEventListener()-Methode der EventTarget-Schnittstelle. Dadurch können Sie Ereignis-Listener an Formularelemente anhängen, ohne deren HTML-Markup zu ändern.

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

Die eventHandler-Funktion wird jedes Mal ausgeführt, wenn das Formular gesendet wird. Sie können Ihre Validierungslogik oder andere benutzerdefinierte Aktionen innerhalb dieser Funktion ausführen.

Standardmäßige Formularübermittlung verhindern

Wenn Sie das standardmäßige Formularübermittlungsverhalten verhindern möchten, rufen Sie die Methode „preventDefault()“ für das Ereignis auf Objekt innerhalb des Event-Handlers:

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

Verwendung von EventTarget.addEventListener

Die Methode EventTarget.addEventListener wird von modernen Browsern weitgehend unterstützt. Es bietet eine browserübergreifende Lösung zum Abhören von Ereignissen auf verschiedenen DOM-Elementen, einschließlich Formularelementen.

Alternativen mit Bibliotheken

Wenn Sie lieber eine Bibliothek verwenden, ziehen Sie die folgenden Optionen in Betracht:

• jQuery: $(ele).submit(callback);
• Reagieren: const callback = (event) => {};
• Vue: @submit="mySubmitHandler"

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