Wie erkennt man Formularübermittlungsereignisse in JavaScript, ohne HTML zu ändern?

Formularsendeereignisse ohne HTML-Markup erkennen

In JavaScript besteht eine häufige Aufgabe darin, Formulare vor dem Absenden zu validieren. Traditionell wurde dies durch die Verwendung von HTML-Attributen wie onSubmit und onClick erreicht. Um jedoch eine eigenständige Validierungsbibliothek zu erstellen, ohne den HTML-Code zu ändern, benötigen Sie einen besseren Ansatz.

Die Lösung besteht darin, das Submit-Ereignis des Formulars nativ in JavaScript abzuhören. So können Sie es machen:

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

In diesem Code stellt ele Ihr Formularelement dar und Callback ist die Funktion, die Sie bei der Formularübermittlung ausführen möchten.

Ereignisweitergabe

Um diesen Code vollständig zu verstehen, ist es wichtig, die Ereignisausbreitung zu verstehen. Betrachten Sie den folgenden HTML-Code:

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

Wenn auf die Schaltfläche „Senden“ geklickt wird, wird ein „Senden“-Ereignis ausgelöst. Dieses Ereignis sprudelt im DOM-Baum nach oben, beginnend bei der Schaltfläche und endend beim Formularelement. Indem wir das Submit-Ereignis im Formular selbst abhören (ele.addEventListener('submit')), erfassen wir das Ereignis, während es im Baum nach oben wandert.

Verhindern der standardmäßigen Formularübermittlung

Wenn Sie beim Senden des Formulars benutzerdefinierte Aktionen ausführen möchten (z. B. eine Validierung), können Sie das standardmäßige Übermittlungsverhalten des Browsers mit „preventDefault()“ verhindern.

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

Im obigen Code ist isValid „false“. , wird die Formularübermittlung verhindert.

Bibliotheksintegrationen

Während die Verwendung von nativem JavaScript bevorzugt wird, bevorzugen einige Entwickler Bibliotheken. So können Sie Form-Submit-Events mit beliebten Bibliotheken anhören:

• jQuery: $(ele).submit(callback);
• Prototype : ele.observe('submit', callback);
• MooTools: ele.addEvent('submit', callback);

Von Wenn Sie die Ereignisweitergabe verstehen und den nativen addEventListener oder die Bibliotheksintegration nutzen, können Sie Formularübermittlungsereignisse in JavaScript effektiv abhören, ohne den HTML-Code zu ändern.

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