Das Submit-Ereignis des Formulars reagiert nicht

1. Problembeschreibung <br />Wenn JS verwendet wird, um die Übermittlungsmethode des Formulars aufzurufen, um das Formular direkt zu übermitteln, reagiert das Übermittlungsereignis nicht. Warum? Bitte antworten Sie, wenn Sie es wissen. Analog dazu habe ich zum Testen input.select() verwendet, aber es konnte auf das Auswahlereignis reagieren. Lassen wir diesen Grund vorerst beiseite und schauen wir uns zunächst an, wie sich das aktuelle Problem lösen lässt.
Codebeispiel, das nicht auf Ereignisse reagiert:
<form id="form1" action="http://www.jb51com"></form>
<Skripttyp="text/javascript">
var form = document.getElementById('form1');
form.onsubmit = Funktion() {
Alarm (1);
};
form.submit();
</Skript>
Im tatsächlichen Betrieb wird kein Alarm ausgegeben.
Obwohl die Verwendung der Submit-Methode zum Senden eines Formulars gegen das Prinzip des unaufdringlichen Javascripts verstößt, ist seine Verwendung manchmal erforderlich, z. B. bei der Verwendung von JS zum Senden des Suchformulars nach Auswahl eines Elements in einer Suchaufforderung (Auto-Vervollständigung).
2. Problemanalyse <br />Da es nicht auf Ereignisse reagiert, besteht die einzige Möglichkeit darin, diese Ereignisse manuell auszulösen. Bevor wir uns für die Lösung zum manuellen Auslösen entscheiden, sehen wir uns die Methode zur Ereignisregistrierung an:
Es gibt zwei „ursprüngliche“ Registrierungsmethoden, siehe die Codebeispiele:
<form id="form1" action="https://www.jb51.net" onsubmit="alert(1)"></form><form id="form1" action="https://www.jb51.net"></form>
<Skripttyp="text/javascript">
document.getElementById('form1').onsubmit = Funktion() {
Alarm (1);
}
</Skript>
Ein solches Registrierungsereignis fügt dem Formular eine „OnSubmit“-Methode hinzu. Daher ist die direkte Ausführung dieser Methode gleichbedeutend mit dem manuellen Auslösen des Ereignisses.
Siehe das Codebeispiel:
<Skripttyp="text/javascript">
form.onsubmit();
</Skript>
Dadurch wird eine Warnung ausgelöst.
Die „erweiterte“ DOM2-Standardregistrierungsmethode und die IE-Registrierungsmethode attachEvent werden jedoch bereits sehr häufig verwendet. Für diese Registrierungsmethoden gibt es die Methode onsubmit nicht. Bei Verwendung von form.onsubmit() wird direkt ein Fehler gemeldet.
3. Lösung <br />Natürlich bietet die „erweiterte“ Registrierungsmethode selbst auch eine Lösung zum manuellen Auslösen von Ereignissen, aber für DOM2-Standards und IE müssen unterschiedliche Programme geschrieben werden. Darüber hinaus ist dieses Programm auch für die „ursprüngliche“ Registrierungsmethode wirksam. Siehe das Codebeispiel:
<Skripttyp="text/javascript">
//IE Feuerereignis
wenn (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 Feuerereignis
} sonst wenn (Dokument.Ereigniserstellen) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('senden', falsch, wahr);
form.dispatchEvent(ev);
}
</Skript>
4. Code-Zusammenfassung <br />Wir werden die detaillierten Methoden hier nicht erläutern. Freunde, die damit nicht vertraut sind, lesen die relevanten Informationen bitte selbst. Lassen Sie uns den gesamten Code aneinanderreihen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=GBK">
<title>Senden</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</Kopf>
<Text>
<form id="form1" action="https://www.jb51.net"></form>
<Skripttyp="text/javascript">
var form = document.getElementById('form1');
//YUI-Registrierungsereignis
YAHOO.util.Event.on('form1', 'senden', Funktion() {
Alarm ('yui');
});
//DOM0-Registrierungsereignis
form.onsubmit = Funktion() {
Alarm(1);
};
//DOM2-Registrierungsereignis
wenn (form.addEventListener) {
form.addEventListener('senden', Funktion() {
Alarm(2);
}, FALSCH);
//IE-Registrierungsereignis
} sonst wenn (form.attachEvent) {
form.attachEvent('onsubmit', Funktion() {
Alarm(2);
});
}
//IE Feuerereignis
wenn (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 Feuerereignis
} sonst wenn (Dokument.Ereigniserstellen) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('senden', falsch, wahr);
form.dispatchEvent(ev);
}
</Skript>
</body>
</html>
Es gibt ein kleines Problem im gesamten Prozess. Unter FX wird form.submit() nicht benötigt. Das Formular wird direkt übermittelt, daher wird dieser Satz weggelassen. Wenn Sie den Grund kennen, antworten Sie bitte.
Diese Demo wurde in IE6/IE7/FX getestet.

<<: Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen

>>: Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Über Front-End JavaScript ES6 Details

Artikel

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

Artikel

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Artikel

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8

Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle

Sag es im Voraus Nodejs liest die Datenbank als a...

Das Submit-Ereignis des Formulars reagiert nicht

Über Front-End JavaScript ES6 Details

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8

Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click

So verwenden Sie Zen-Codierung in Dreamweaver

JS+CSS zur Realisierung einer dynamischen Uhr

Verwenden Sie vue3, um ein Mensch-Katze-Kommunikations-Applet zu implementieren

Docker fügt eine Brücke hinzu und legt den IP-Adressbereich fest

Mysql praktische Übungen einfaches Bibliotheksverwaltungssystem

Artikel empfehlen

So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad

Vue implementiert horizontal abgeschrägtes Balkendiagramm

Vue implementiert eine kleine Countdown-Funktion

Detaillierte Erklärung zur Installation von PHP7 unter Linux

Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle

JS implementiert einfachen Kalendereffekt

Eine kurze Analyse von Kubernetes-Controllern und -Labels

So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank

Detaillierte Bereitstellungsschritte für MySQL MHA-Hochverfügbarkeitskonfiguration und Failover

Detaillierte Erklärung der Verwendung des MySQL-Paradigmas

Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation

HTML CSS3 streckt den Bildanzeigeeffekt nicht

Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Nginx-Weiterleitung basierend auf URL-Parametern

Schritte zum Erstellen eines Vite-Projekts