Das Submit-Ereignis des Formulars reagiert nicht

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

Artikel empfehlen

js, um einen einfachen Taschenrechner zu erstellen

In diesem Artikel finden Sie den spezifischen Cod...

Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS

Inhaltsverzeichnis 1. Verwenden von Set()+Array.f...

Detaillierte Beschreibung des HTML-Meta-Viewport-Attributs

Was ist ein Ansichtsfenster? Mobile Browser platzi...

Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung

Vorwort Abfrageoptimierung ist nichts, was über N...

4 Lösungen für MySQL-Import-CSV-Fehler

Dies soll an die 4 Fallstricke erinnern, in die i...

Einführung in die Verwendung des offiziellen MySQL-Leistungstesttools mysqlslap

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...

Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds

Ein Trick zum Umgang mit dieser Art von Fehlern be...

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

Es wird in Form von WeChat-Komponenten bereitgest...

Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal

Hier sind zwei Terminal-Split-Screen-Tools: scree...

Detaillierte Erläuterung der MySQL-Methode für verzögerte Replikationsbibliotheken

Einfach ausgedrückt besteht die verzögerte Replik...

MySQL-Export ganzer oder einzelner Tabellendaten

Exportieren einer einzelnen Tabelle mysqldump -u ...

Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems

Unabhängig davon, ob Sie ein Windows- oder Linux-...

Die „3I“-Standards für erfolgreiche Printwerbung

Für viele inländische Werbetreibende ist die Erste...

Lösung für das Problem, dass nach dem Domänennamen zwei Schrägstriche // erscheinen, wenn nginx für den Domänennamenzugriff konfiguriert ist

Ich habe vor Kurzem meine persönliche Website neu...

Installations-Tutorial zur komprimierten Version von MySQL 8.0.20 mit Bildern und Text

1. MySQL-Download-Adresse; http://ftp.ntu.edu.tw/...