Wenn Sie das Schreiben weniger als JQuery verwenden, werden Sie unweigerlich von einheimischen JS versucht.
Xiaocai will diesen Blog eigentlich nicht schreiben, es scheint sehr rudimentär zu sein, aber als sie nicht einmal die Bindung und Abbau von JS -Events im Internet erklären kann, beschloss sie, eine populäre Wissenschaft zu machen.
Zunächst weiß Xiaocai nicht viel, teile meine Ideen einfach mit Ihnen.
DOM0 -Ereignismodell
Ereignismodelle entwickeln sich ständig weiter und die frühen Ereignismodelle werden als DOM0 -Ebene bezeichnet.
DOM0 -Ereignismodell, unterstützt von allen Browsern.
Das Registrieren des Ereignisnamens direkt im DOM -Objekt ist die DOM0 -Schreibmethode, z. B.:
Die Codekopie lautet wie folgt:
document.getElementById ("test"). onclick = function (e) {};
Es bedeutet, ein Onclick -Event zu registrieren. Natürlich hat es die gleiche Bedeutung wie dieses Schreiben:
Die Codekopie lautet wie folgt:
document.getElementById ("test") ["OnmousEmove"] = Funktion (e) {};
Dies ist nichts, es sind nur zwei Möglichkeiten, auf JS -Objekteigenschaften zuzugreifen. Die Form von [] besteht hauptsächlich darin, das Problem zu lösen, dass der Attributname keine rechtliche Kennung ist. Zum Beispiel muss Object.123 einen Fehler melden, aber Objekt ["123"] vermeidet dieses Problem. Gleichzeitig schreibt das Schreiben von [] JS auch lebendig und verwendet Zeichenfolgen, um den Attributnamen darzustellen, der Ereignisse zur Laufzeit dynamisch binden kann.
Zurück zum Punkt, wenn das Ereignis ausgelöst wird, wird ein Parameter E standardmäßig übergeben, um das Ereignisobjekt darzustellen. Durch E können wir viele nützliche Informationen erhalten, z.
Basierend auf DOM0 -Ereignissen kann für denselben DOM -Knoten nur einer registriert werden, und dasselbe später registrierte Ereignis überschreibt die vorherigen registrierten. Zum Beispiel:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
btn.onmousemove = function (e) {
Alert ("OK");
};
btn ["Onmousemove"] = Funktion (e) {
Alert ("OK1");
};
Das Ergebnis gibt OK1 aus.
Lassen Sie uns als nächstes darüber sprechen. Wenn ein Ereignis ausgelöst wird, bezieht sich dies darauf, welches DOM -Objekt das Ereignis ausgelöst wird. Zum Beispiel:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
btn.onmousemove = function (e) {
alarm (this.id);
};
Der Ergebnis gibt Test aus. Da das Ereignis im DOM -Knoten mit ID -Test registriert ist, repräsentiert dies natürlich diesen DOM -Knoten, wenn das Ereignis ausgelöst wird. Es ist zu verstehen, dass das Ereignis von diesem Dom -Knoten aufgerufen wird.
Daher ist es recht einfach, das Ereignis zu kündigen. Sie müssen das Ereignis nur erneut registrieren und den Wert auf NULL festlegen, zum Beispiel:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
btn.onclick = function (e) {
Alert ("OK");
};
btn.onclick = null;
Das Prinzip ist, dass das letzte registrierte Ereignis das vorherige überschreiben muss. Legen Sie die zuletzt registrierte Veranstaltung auf NULL ein, die die Veranstaltung entbinden wird.
Die Angelegenheit ist noch nicht vorbei, und das DOM0 -Ereignismodell umfasst auch Ereignisse, die direkt in die HTML geschrieben sind. Zum Beispiel:
Die Codekopie lautet wie folgt:
<div id = "test" onclick = "exec ();" > </div>
Auf diese Weise registrierte Ereignisse folgen auch dem Deckungsprinzip, und nur eine kann registriert werden und der letzte wird wirksam.
Der Unterschied besteht darin, dass das auf diese Weise registrierte Ereignis gleichbedeutend mit dynamischer Funktionen (etwas EV -Mittel), sodass das Ereignisobjekt nicht übergeben wird. Gleichzeitig zeigt dieses Fenster auf das Fenster und ist nicht mehr das DOM -Objekt, das das Ereignis auslöst.
DOM2 -Ereignismodell
Im Vergleich zu DOM0 versteht Shouca nur die folgenden zwei Punkte:
・ DOM2 unterstützt die Registrierung mehrerer gleichen Ereignisse mit demselben DOM -Element.
・ DOM2 hat das Konzept der Erfassung und Sprudeln hinzugefügt.
DOM2 -Ereignisse werden von AddEventListener und REMEDEVentListener verwaltet. Dies ist natürlich der Standard.
IE8 und die folgenden Browser haben jedoch entsprechende Attachente und Abteilung erstellt. Da Xiaocai etwas unbeabsichtigt ist, wird dieser Artikel ihn nicht erörtern.
AddEventListener ist natürlich die Registrierungsereignis. Es hat drei Parameter, nämlich "Ereignisname", "Ereignisrückruf" und "Capture/Bubble". Zum Beispiel:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
Btn.AddeVentListener ("Click", Funktion (e) {
Alert ("OK");
}, FALSCH);
Unnötig zu erwähnen, dass der Ereignisname nicht zu viel ist. Im Vergleich zu DOM0 wird das vorherige Eingang nur entfernt.
Event -Rückrufe sind ebenfalls leicht zu verstehen. Sie müssen Sie benachrichtigen, wenn das Ereignis ausgelöst wird! Wenn Sie wie DOM0 zurückrufen, wird standardmäßig ein Ereignisparameter übergeben. Gleichzeitig bezieht sich dies auf den DOM -Knoten, der das Ereignis auslöst.
Der letzte Parameter ist der boolesche Typ, True repräsentiert das Capture -Ereignis und False repräsentiert das Blasenereignis. Eigentlich ist es leicht zu verstehen. Lassen Sie uns zuerst ein Diagramm machen:
Wenn ein Element ein Ereignis auslöst, ist das erste, was benachrichtigt wird, das Fenster und dann das Dokument, und geht nacheinander, bis das Element (Zielelement), das das Ereignis tatsächlich auslöst. Dieser Prozess ist die Erfassung. Als nächstes sprudelt das Ereignis aus dem Zielelement und beendet dann nach dem Fensterobjekt. Dieser Prozess ist Blase.
Warum so gestalten? Dies scheint auf seine tiefgreifenden historischen Ursprünge zurückzuführen zu sein, so dass Xiaocai nicht viel darüber weiß, sodass sie keinen Unsinn spricht.
Daraus können wir sehen, dass das Capture -Ereignis vor dem Bubble -Ereignis ausgelöst wird.
Angenommen, es gibt eine solche HTML -Struktur:
Die Codekopie lautet wie folgt:
<div id = "test">
<div id = "TestsNer"> </div>
</div>
Anschließend registrieren wir zwei Klick -Ereignisse auf der äußeren DIV, nämlich das Capture -Ereignis und das sprudelnde Ereignis, der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
// Ereignisse fangen
Btn.AddeVentListener ("Click", Funktion (e) {
Alert ("OK1");
}, WAHR);
// sprudelndes Ereignis
Btn.AddeVentListener ("Click", Funktion (e) {
Alert ("OK");
}, FALSCH);
Klicken Sie schließlich auf die innere Div, zuerst OK1, dann OK OK. In Kombination mit dem obigen schematischen Diagramm entspricht das äußere Div dem Körper in der Abbildung, und das innere Div entspricht dem unteren Div in der Abbildung und beweist, dass das Erfassungsereignis zuerst ausgeführt wird und dann das Bubble -Ereignis ausgeführt wird.
Warum betonen, wie Sie auf die innere DIV klicken? Denn das DOM -Element, das das Ereignis wirklich auslöst, muss aus der inneren Ebene stammen, und das DOM -Element der äußeren Ebene hat die Möglichkeit, Ereignisse und Blasenereignisse zu simulieren und zu erfassen, die aus dem schematischen Diagramm aus ersichtlich sind.
Was ist, wenn Sie das Capture -Ereignis und das sprudelnde Ereignis auf dem DOM -Element registrieren, das das Ereignis tatsächlich auslöst?
Die HTML -Struktur ist die gleiche wie oben, und der JS -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
var btninner = document.getElementById ("Testserner");
// sprudelndes Ereignis
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK");
}, FALSCH);
// Ereignisse fangen
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK1");
}, WAHR);
Klicken Sie natürlich auf die innere DIV, und das Ergebnis ist, dass OK zuerst auftaucht, dann OK1. Theoretisch sollte das Capture -Ereignis zuerst ausgelöst werden, dh OK1 taucht zuerst auf, aber hier ist etwas Besonderes, da wir ein Ereignis auf dem DOM -Element registrieren, das das Ereignis tatsächlich auslöst, was der Registrierung in der DIV in der Abbildung entspricht. Aus der Abbildung können wir sehen, dass das DOM -Element, das das Ereignis tatsächlich auslöst, der Endpunkt des Capture -Ereignisses und der Ausgangspunkt des Blasenereignisses ist, sodass hier keine Unterscheidung zwischen den Ereignissen besteht. Welches registriert zuerst, was zuerst eine ausführt. In diesem Beispiel ist das Bubble -Ereignis zuerst registriert, sodass es zuerst ausgeführt wird.
Dieses Prinzip gilt für mehrere Ereignisse derselben Art. Wenn beispielsweise 3 Blasenereignisse gleichzeitig registriert sind, befindet sich die Ausführungsbestellung in der Reihenfolge der Registrierung, zuerst registrieren und zuerst ausführen. Zum Beispiel:
Die Codekopie lautet wie folgt:
var btninner = document.getElementById ("Testserner");
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK");
}, FALSCH);
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK1");
}, FALSCH);
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK2");
}, FALSCH);
Das Ergebnis ist natürlich OK, OK1 und OK2-Pop-ups.
Um das Ereignismodell weiter zu verstehen, gibt es ein weiteres Szenario. Wenn das äußere Div und das innere DIV das Capture -Ereignis gleichzeitig registrieren, muss das äußere Div -Ereignis beim Klicken auf die innere DIV zuerst ausgelöst werden. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
var btninner = document.getElementById ("Testserner");
Btninner.AdDeVentListener ("Click", Funktion (e) {
Alert ("OK");
}, WAHR);
Btn.AddeVentListener ("Click", Funktion (e) {
Alert ("OK1");
}, WAHR);
Das Ergebnis ist, dass OK1 zuerst auftaucht.
Wenn sowohl die äußere Div als auch die innere DIV registrierte Blasenereignisse sind, muss beim Klicken auf das innere Div zuerst das innere Div -Ereignis ausgeführt werden, und das Prinzip ist das gleiche.
Sorgfältige Leser werden feststellen, dass der äußere Div auch ein Ereignis auslöst, was ein Problem zu sein scheint, wenn Sie auf die innere DIV klicken!
Das Klick ist eindeutig die innere Div, aber das äußere Div -Ereignis wird ebenfalls ausgelöst, was in der Tat ein Problem darstellt.
Wenn das Ereignis ausgelöst wird, wird ein Ereignisobjekt standardmäßig übergeben. Wie bereits erwähnt, gibt es eine Methode zu diesem Ereignisobjekt: StopPropagation. Durch diese Methode können Blasen verhindert werden, so dass die äußere Div das Ereignis nicht erhält. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
var btninner = document.getElementById ("Testserner");
Btn.AddeVentListener ("Click", Funktion (e) {
Alert ("OK1");
}, FALSCH);
Btninner.AdDeVentListener ("Click", Funktion (e) {
// Blasen stoppen
E.Stoppropagation ();
Alert ("OK");
}, FALSCH);
Schließlich muss ich darüber sprechen, wie ich den Vorfall lösen kann. Unevent Syntax: Btn.RemoveEventListener ("Ereignisname", "Ereignisrückruf", "Capture/Bubble");
Dies entspricht den Parametern des Bindungsereignisses, wie ausführlich beschrieben:
・ Der Name des Ereignisses bedeutet, das Ereignis abzusagen.
・ Ereignisrückruf ist eine Funktion, die der Funktion, die das Ereignis registriert, übereinstimmen muss.
・ Ereignisart, Boolean -Wert, dies muss mit dem Typ übereinstimmen, wenn das Ereignis registriert ist.
Mit anderen Worten, Name, Rückruf und Typ, zusammen entscheiden, welches Ereignis absagen soll, ist unverzichtbar. Zum Beispiel:
Die Codekopie lautet wie folgt:
var btn = document.getElementById ("test");
// den Rückruf in einer Variablen speichern
var fn = Funktion (e) {
Alert ("OK");
};
//Bindung
Btn.AdDeVentListener ("Click", fn, false);
//Entfernung
btn.removeEventListener ("click", fn, false);
Damit das registrierte Ereignis storniert werden soll, muss die Rückruffunktion gespeichert werden, sonst kann sie nicht storniert werden.
Gemischt DOM0 und DOM2
Die Dinge sind bereits sehr chaotisch, und dies ist eine gemischte Verwendung, die Menschen zum Leben bringt. . .
Haben Sie keine Angst, es ist kein Problem, es gemischt zu verwenden. Das DOM0 -Modell und das DOM2 -Modell folgen jeweils ihre eigenen Regeln und wirken sich nicht gegenseitig aus.
Insgesamt gibt es nichts anderes, wenn es zuerst registriert und zuerst ausgeführt wird.
PostScript
Zu diesem Zeitpunkt wurde das einheimische JS -Event fast abgeschlossen. Xiaocai weiß das nur. Leser sind herzlich eingeladen, andere Wissenspunkte hinzuzufügen.
In den tatsächlichen Anwendungen werden echte Experten nicht so viele Veranstaltungen dumm registrieren. Im Allgemeinen müssen Sie nur ein Ereignis über das äußerste DOM -Element registrieren und dann den Mechanismus für Erfassung und Blasen verwenden, um das DOM -Element zu finden, das das Ereignis tatsächlich auslöst, und den Rückruf schließlich basierend auf den Informationen, die das DOM -Element für das Ereignis auslöst, aufrufen.
Mit anderen Worten, Experten verwalten Ereignisse selbst, ohne sich auf Browser zu verlassen, um sie zu verwalten, was die Effizienz verbessern und die Kompatibilität gewährleisten kann. Ist das nicht das, was JQuery tut?
Ok, das Tutorial endet hier, ich hoffe es wird für die Leser hilfreich sein!