Wie man effiziente Web-Front-End-Programme erstellt, ist ein Problem, das ich jedes Mal, wenn ich Front-End-Entwicklung mache, unbewusst berücksichtigen werde. Vor einigen Jahren veröffentlichten die fantastischen Front-End-Ingenieure in Yahoo ein Buch über die Verbesserung der Leistung des Web-Front-Ends, das in der gesamten Branche der Webentwicklungstechnologie zu einer Sensation führte und die mysteriöse Web-Front-End-Optimierung zu einem Kohl auf der Straße gestaltet hat, und die Optimierung der Web-Front-End-Optimierung ist zu einer einfachen Frage geworden, dass beide Novices und Big Giants beantworten können. Wenn die gesamte Branche die Antwort auf das schockierende Geheimnis kennt, kann die vorhandene Optimierungstechnologie keinen qualitativen Sprung mehr für die von Ihnen entwickelte Website erzeugen. Um die Leistung der Website zu gestalten, entwickeln wir uns besser als die Websites anderer Menschen, müssen wir tiefer nachdenken und bessere Fähigkeiten reservieren.
Das Ereignissystem in JavaScript ist der erste Durchbruchpunkt, an den ich denke. Warum ist es ein JavaScript -Ereignissystem? Wir alle wissen, dass das Web-Front-End drei Technologien enthält: HTML, CSS und JavaScript. Es ist klar, wie HTML und CSS kombiniert werden: Stil-, Klasse-, ID- und HTML -Tags. Es gibt nichts zu sprechen, aber wie JavaScript zwischen HTML und CSS in die Mitte eintritt und die drei integrieren lässt? Schließlich stellte ich fest, dass dieser Einstiegspunkt das Ereignissystem von JavaScript ist. Egal wie lange oder komplexer JavaScript -Code wir schreiben, er spiegelt sich letztendlich in HTML und CSS über das Ereignissystem wider. Daher dachte ich, da das Ereignissystem der Einstiegspunkt für die Integration der drei ist, wird es auf einer Seite zwangsläufig eine große Anzahl von Ereignisvorgängen geben, insbesondere auf den immer komplexeren Webseiten von heute. Ohne diese Ereignisse kann der JavaScript -Code, den wir sorgfältig geschrieben haben, nur in der Bibliothek verwendet werden, und Helden sind nutzlos. Da es auf der Seite eine große Anzahl von Ereignisfunktionen gibt, wird es dann Probleme geben, die die Effizienz beim Schreiben von Ereignisfunktionen beeinflussen, wie wir es gewohnt sind? Die Antwort, die ich studiert habe, ist, dass es sich um ein echtes Effizienzproblem handelt und auch ein ernstes Effizienzproblem.
Um meine Antwort zu klären, möchte ich das Ereignissystem von JavaScript im Detail erklären.
Das Ereignissystem ist der Einstiegspunkt für die Fusion von JavaScript, HTML und CSS. Dieser Punkt ist wie die Hauptfunktion in Java. Alle Magie beginnt hier. Wie vervollständigt der Browser diesen Eintrag? Ich habe drei Möglichkeiten studiert, sie sind:
Methode 1: HTML -Ereignisverarbeitung
Die HTML -Ereignisverarbeitung besteht darin, Ereignisfunktionen direkt in das HTML -Tag zu schreiben. Da diese Schreibmethode eng mit dem HTML -Tag verbunden ist, wird sie als HTML -Ereignisverarbeitung bezeichnet. Zum Beispiel der folgende Code:
Die Codekopie lautet wie folgt:
<Eingabe type = "button" id = "btn" name = "btn" onclick = "alert ('klick mich!')"/>
Wenn die Klickereignisfunktion kompliziert ist, verursacht das Schreiben von Code wie diesen definitiv Unannehmlichkeiten. Daher schreiben wir die Funktion häufig außerhalb und auf dem Einklick, um den Funktionsnamen direkt aufzurufen, zum Beispiel:
Die Codekopie lautet wie folgt:
<Eingabe type = "button" id = "btn" name = "btn" onclick = "btnclk ()"/>
Funktion btnclk () {
Alert ("Klicken Sie mich!");
}
Die obige Schreibmethode ist eine sehr schöne Schreibmethode, so dass viele Menschen sie heutzutage unbewusst anwenden werden, aber viele Menschen wissen möglicherweise nicht, dass die letztere Schreibmethode eigentlich nicht so stark ist wie die erstere Schreibmethode. Dies ist auch ein Problem, das ich bei der Untersuchung der nicht blockierenden Ladungsskript-Technologie vor nicht allzu langer Zeit hatte, da sich JavaScript-Code nach dem Prinzip der Front-End-Optimierung häufig am Ende der Seite befindet. Wenn die Seite durch ein Skript blockiert wird, wurde die im HTML -Tag verwiesene Funktion möglicherweise noch nicht ausgeführt. Zu diesem Zeitpunkt klicken wir auf die Seite der Seite, und das Ergebnis wird gemeldet "Die XXX -Funktion ist undefinierter Fehler". In JavaScript werden solche Fehler durch Versuch erfasst. Um den Code robuster zu gestalten, werden wir daher folgende Umschreibungen haben:
Die Codekopie lautet wie folgt:
<Eingabe type = "button" id = "btn" name = "btn" onclick = "try {btnclk ();} catch (e) {}"/>
Wenn Sie den obigen Code sehen, kann dies von einer ekelhaften Person nicht beschrieben werden.
Methode 2: Ereignisverarbeitung auf DOM0 -Ebene auf der Ebene
Die Ereignisverarbeitung der DOM0 -Ebene ist eine Ereignisverarbeitung, die heute von allen Browsern unterstützt wird. Es gibt kein Kompatibilitätsproblem. Wenn Sie einen solchen Satz sehen, wird jeder, der ein Web-Front-End macht, aufgeregt. Die Regel für die DOM0 -Ereignisverarbeitung lautet: Jedes DOM -Element hat ein eigenes Ereignisverarbeitungsattribut, dem eine Funktion zugewiesen werden kann, z. B. den folgenden Code:
Die Codekopie lautet wie folgt:
var btndom = document.getElementById ("btn");
btndom.onclick = function () {
Alert ("Klicken Sie mich!");
}
Die Ereignisattribute, die von Ereignissen auf DOM0 -Ebene behandelt werden, werden in Form von "On+Ereignisname" definiert, und das gesamte Attribut befindet sich in Kleinbuchstaben. Wir wissen, dass das DOM-Element ein JavaScript-Objekt im JavaScript-Code ist. Daher ist es sehr einfach, die Ereignisverarbeitung auf DOM0-Ebene aus der Perspektive des JavaScript-Objekts zu verstehen, z. B. den folgenden Code:
Die Codekopie lautet wie folgt:
btndom.onclick = null;
Dann wird die Schaltfläche Klickereignis storniert.
Schauen wir uns den folgenden Code an:
Die Codekopie lautet wie folgt:
btndom.onclick = function () {
Alert ("Klicken Sie mich!");
}
btndom.onclick = function () {
Alert ("Klicken Sie auf Me1111!");
}
Die nächste Funktion überschreibt die erste Funktion.
Methode 3: DOM2 -Ereignisverarbeitung und IE -Ereignisverarbeitung
Die DOM2 -Ereignisverarbeitung ist eine standardisierte Ereignisverarbeitungslösung, aber der IE -Browser hat eine Reihe von Funktionen entwickelt und Funktionen ähneln der DOM2 -Ereignisverarbeitung, aber der Code unterscheidet sich von diesem.
Vor der Erläuterung der Methode drei muss ich einige Konzepte hinzufügen, ansonsten werde ich die Konnotation der Methode drei nicht erklären.
Das erste Konzept ist: Ereignisfluss
In der Seitenentwicklung begegnen wir häufig auf diese Situation. Das Arbeitsintervall einer Seite kann durch ein Dokument in JavaScript dargestellt werden. Auf der Seite befindet sich ein Div. Das Div entspricht dem Überlagern des Dokumentelements. Es gibt ein Knopfelement im Div. Das Tastenelement überlagert das Div, das auch dem Dokument überlagert. Das Problem ist also, wenn wir auf diese Schaltfläche klicken, findet dieses Klickverhalten nicht nur auf der Schaltfläche statt. Sowohl das DIV als auch das Dokument werden für Klickoperationen verwendet. Laut Logic können diese drei Elemente Klick -Ereignisse auslösen. Der Ereignisstrom beschreibt das Konzept des obigen Szenarios. Der Ereignisstrom bedeutet: die Reihenfolge der von der Seite erhaltenen Ereignisse.
Das zweite Konzept: Ereignisblasen und Ereigniserfassung
Ereignisblasen sind die von Microsoft vorgeschlagene Lösung, um das Ereignisflussproblem zu lösen, während die Ereigniserfassung die von Netscape vorgeschlagene Ereignisflusslösung ist. Ihre Prinzipien sind wie folgt:
Das sprudelnde Ereignis beginnt mit einem Div, gefolgt von einem Körper und schließlich ein Dokument, und die Ereigniserfassung wird umgekehrt, zuerst ein Dokument, gefolgt von einem Körper und schließlich ein Zielelement Div. Im Gegensatz dazu ist die Lösung von Microsoft humaner und im Einklang mit den Betriebsgewohnheiten der Menschen ist die Lösung von Netscape sehr umständlich. Dies ist die Folge des Browserkrieges. Netscape ist langsamer und löst das Problem des Ereignisflusses, indem der Code geopfert wird, den Benutzer gewohnt sind.
Microsoft hat ein neues Ereignissystem in Kombination mit Bubble -Events entwickelt, das allgemein als IE -Eventverarbeitung in der Branche bekannt ist. Die Methode der IE -Ereignisverarbeitung ist wie im folgenden Code gezeigt:
Die Codekopie lautet wie folgt:
var btndom = document.getElementById ("btn");
Btndom.attacheAvent ("Onclick", function () {
Alert ("Klicken Sie mich!");
});
Fügen Sie Ereignisse über die Anhangsmethode des DOM -Elements unter IE hinzu. Im Vergleich zur DOM0 -Ereignisverarbeitung hat sich die Methode zum Hinzufügen von Ereignissen von Attributen zu Methoden geändert. Wenn wir also Ereignisse hinzufügen, müssen wir Parameter in die Methode übergeben. Die Anhangs -Methode empfängt zwei Parameter. Der erste Parameter ist der Ereignisart. Die Benennung des Ereignisentyps entspricht der Veranstaltung, die in der DOM0 -Ereignisverarbeitung benannt wird. Der zweite Parameter ist die Ereignisfunktion. Der Vorteil der Verwendung der Methode besteht darin, dass das gleiche Element wie unten gezeigt ein Klickereignis hinzugefügt wird:
Die Codekopie lautet wie folgt:
Btndom.attacheAvent ("Onclick", function () {
Alert ("Klicken Sie mich!");
});
Btndom.attacheAvent ("Onclick", function () {
ALERT ("Klicken Sie auch mich!");
});
Führen Sie es aus, beide Dialogfelder werden normal angezeigt, sodass wir dem DOM -Element mehrere verschiedene Klickereignisse hinzufügen können. Was ist, wenn wir keine Veranstaltung wollen? Was sollen wir tun? Ich biete eine Ablösungsmethode zum Löschen von Ereignissen. Die Parameterliste entspricht dem Anhang. Wenn wir ein bestimmtes Klickereignis löschen möchten, übergeben Sie einfach dieselben Parameter wie das Ereignis hinzufügen, wie im folgenden Code gezeigt:
Die Codekopie lautet wie folgt:
btndom.detACHEvent ("Onclick", function () {
ALERT ("Klicken Sie auch mich!");
});
Beim Laufen sind die Konsequenzen sehr ernst und wir sind verwirrt. Das zweite Klick wurde nicht gelöscht. Was ist los? Ich habe bereits erwähnt, dass das Löschen von Ereignissen das Übergeben von Parametern wie das Hinzufügen von Ereignissen erfordert. In der anonymen Funktion von JavaScript verwendet JavaScript jedoch, selbst wenn der Code der beiden anonymen Funktionen genau gleich ist, verschiedene Variablen, um sie intern zu speichern. Infolgedessen kann das Phänomen, das wir sehen, das Klickereignis nicht löschen, daher muss unser Code so geschrieben werden:
Die Codekopie lautet wie folgt:
var ftn = function () {
ALERT ("Klicken Sie auch mich!");
};
Btndom.attachevent ("Onclick", ftn);
Btndom.DetACHEvent ("Onclick", ftn);
Die hinzugefügte Methode und die auf diese Weise gelöschte Methode weisen auf dasselbe Objekt hin, sodass das Ereignis erfolgreich gelöscht wurde. Das Szenario hier zeigt uns, dass wir eine gute Angewohnheit haben müssen, Ereignisse zu schreiben, die wir unabhängig voneinander Operationen definieren müssen, und keine anonymen Funktionen als Gewohnheit verwenden müssen.
Als nächstes ist die DOM2 -Ereignisverarbeitung, sein Prinzip ist in der folgenden Abbildung dargestellt:
DOM2 ist ein standardisiertes Ereignis. Mit DOM2 -Ereignissen beginnt die Ereignisbereitstellung mit der Erfassungsmethode, dh vom Dokument und dann zum Körper. Das Div ist ein Vermittler. Wenn das Ereignis den Vermittlerpunkt erreicht, befindet sich das Ereignis in der Zielphase. Nach dem Eintritt in die Zielbühne beginnt das Ereignis zu sprudeln und zu handhaben, und schließlich endet das Ereignis im Dokument. (Ich zeige auf Dokument in diesem Artikel, aber die tatsächliche Situation ist, dass einige Browser das Ereignis erfassen und die Blase im Fenster beenden. Ich denke jedoch, dass der Browser selbst während der Entwicklung mehr entwicklungsorientiert ist, um auf Dokument zu achten, also verwende ich hier Dokument.) Menschen werden verwendet, um die Zielstufe als Teil der Blase zu klassifizieren, vor allem, weil Blasenereignisse in der Entwicklung häufiger eingesetzt werden.
Die DOM2 -Ereignisverarbeitung ist sehr schwierig. Wenn jedes Ereignis ausgelöst wird, werden alle Elemente zweimal durchquert. Im Vergleich zum IE -Event ist die Leistung viel schlechter als das IE -Ereignis. Ich sprudle nur, also muss ich nur einmal durchqueren. Weniger Traversal bedeutet jedoch nicht, dass das IE -Ereignissystem effizienter ist. Die gleichzeitige Unterstützung von zwei Ereignissystemen bringt unsere Entwicklung aus der Sicht der Entwicklung und des Designs mehr Flexibilität. Aus dieser Perspektive sind DOM2 -Ereignisse immer noch sehr wünschenswert. Der Code für das DOM2 -Ereignis lautet wie folgt:
Die Codekopie lautet wie folgt:
var btndom = document.getElementById ("btn");
btndom.addeventListener ("click", function () {
Alert ("Klicken Sie mich!");
},FALSCH);
var ftn = function () {
ALERT ("Klicken Sie auch mich!");
};
Btndom.AdDeVentListener ("Click", ftn, false);
Die Hinzufügung von Ereignissen in der DOM2 -Ereignisverarbeitung verwendet AddEventListener, der einen mehr Parameter als IE -Ereignisverarbeitung empfängt. Die ersten beiden bedeuten die gleichen wie die beiden Parameter der IE -Ereignisverarbeitungsmethode. Der einzige Unterschied besteht darin, dass das Präfix eingeschaltet im ersten Parameter entfernt wird und der dritte Parameter ein boolescher Wert ist. Wenn sein Wert stimmt, wird das Ereignis im Erfassungsmodus mit dem Wert False verarbeitet. Die Veranstaltung wird in Blasen verarbeitet. Mit dem dritten Parameter können wir verstehen, warum das Ereigniselement in der DOM2 -Ereignisverarbeitung zweimal ausgeführt werden sollte. Der Zweck ist, mit den beiden Ereignismodellen kompatibel zu sein. Bitte beachten Sie hier jedoch, dass die beiden Durchfahrten egal ob wir uns für die Erfassung oder Blasen entscheiden, für immer durchgeführt werden. Wenn wir eine Ereignisverarbeitungsmethode auswählen, wird im anderen Ereignisverarbeitungsprozess keine Ereignisverarbeitungsfunktion ausgelöst. Dies ist das gleiche wie das Prinzip, das Auto in neutraler Ausrüstung im Leerlauf zu machen. Durch das Design der DOM2 -Ereignismethode wissen wir, dass DOM2 -Ereignisse nur eine von zwei Ereignisverarbeitungsmethoden zur Laufzeit ausführen können. Es ist unmöglich, dass zwei Event -Stream -Systeme gleichzeitig provozieren können. Obwohl das Element zweimal durchquert wird, kann die Ereignisfunktion nicht zweimal provoziert werden. Beachten Sie, dass ich meine, dass kein zweimal provoziert ist, was sich auf eine Ereignisfunktion bezieht. Tatsächlich können wir die Situation simulieren, in der zwei Event -Stream -Modelle gleichzeitig ausgeführt werden, z. B. den folgenden Code:
Die Codekopie lautet wie folgt:
Btndom.AdDeVentListener ("Click", ftn, true);
Btndom.AdDeVentListener ("Click", ftn, false);
Diese Schreibweise ist jedoch die Verarbeitung mit mehreren Events, die dem zweimal auf die Schaltfläche klicken.
DOM2 bietet auch eine Funktion zum Löschen von Ereignissen. Diese Funktion ist RemeeVentListener, die wie folgt geschrieben wurde:
Die Codekopie lautet wie folgt:
btndom.removeEventListener ("Click", ftn, false);
Gleiches gilt für das IE -Ereignis, dh die Parameter müssen mit den Parametern übereinstimmen, die das Ereignis definieren. Bei Verwendung von REMEDEVENTLILENER wird jedoch der dritte Parameter nicht übergeben. Die Standardeinstellung besteht darin, das Bubble -Ereignis zu löschen, da die Standardeinstellung falsch ist, wenn der dritte Parameter nicht übergeben wird. Zum Beispiel:
Die Codekopie lautet wie folgt:
Btndom.AdDeVentListener ("Click", ftn, true);
btndom.removeventListener ("click", ftn);
Führen Sie es aus und stellen Sie fest, dass die Veranstaltung nicht erfolgreich gelöscht wurde.
Schließlich möchte ich sagen, dass die DOM2 -Event -Handhabung in IE9 gut unterstützt wird, einschließlich IE9 oder höher, und IE8 unten unterstützt DOM2 -Ereignisse nicht.
Vergleichen wir wie folgt die drei Ereignismethoden:
Vergleich 1: Vergleich einer Methode für eine Seite und die beiden anderen Methoden
Der Weg zum Schreiben einer Methode ist das Kombinieren von HTML und JavaScript. Du hast mich und ich habe dich. Vertiefern Sie diese Methode, um eine gemischte Entwicklung von HTML und JavaScript zu erreichen. In einem Software -Term handelt es sich um eine Codekupplung. Die Codekupplung ist nicht gut und es ist sehr schlecht. Dies ist die Ebene eines Rookie -Programmierers. Sobald die Methode vollständig besiegt ist, werden die beiden anderen Methoden gewinnen.
Vergleich 2: Methode 2 und Methode 3
Die beiden sind auf die gleiche Weise geschrieben. Manchmal ist es wirklich schwer zu sagen, wer besser oder schlechter ist. Wenn wir uns den obigen Inhalt ansehen, stellten wir fest, dass der größte Unterschied zwischen Modus 2 und Modus 3 darin besteht, dass nur ein Ereignis in einem DOM -Element vorhanden ist, und nur einmal, während Modus 3 ein Ereignis in einem DOM -Element zulässt, dass sie mehrere Ereignisverarbeitungsfunktionen haben. In der DOM2 -Ereignisverarbeitung kann der Modus 3 auch die Ereignisflussmethode genau steuern. Daher ist die Funktion des Modus 3 leistungsfähiger als Modus 2, so dass sie im Vergleich zum Modus 3 etwas besser ist.
Das Folgende liegt im Mittelpunkt dieses Artikels: die Leistungsprobleme von Ereignissystemen. Um die Leistungsprobleme zu lösen, muss man einen Fokus finden. Hier werde ich über die Leistungsprobleme von Ereignissystemen aus zwei Fokuspunkten nachdenken, nämlich: Verringerung der Anzahl der Travers und Speicherverbrauch.
Zunächst die Anzahl der Traverals. Unabhängig davon, ob es Ereignisströme oder sprudelnde Ereignisströme erfasst, durchqueren sie Elemente, aber alle durchquer werden aus dem oberen Fenster oder Dokument. Wenn das DOM-Element der Seite eine tiefe Eltern-Kind-Beziehung aufweist, desto schädlicher wird es, je mehr Elemente Sie durchqueren, desto größer ist es wie die DOM2-Ereignisverarbeitung, desto größer ist der Traversal. Wie kann ich das Problem der Durchquerung dieses Ereignisstroms lösen? Meine Antwort ist nein. Einige Freunde hier haben möglicherweise Fragen, wie kommt es, dass es nicht mehr gibt? Im Ereignissystem gibt es ein Ereignisobjekt, das eine Veranstaltung ist. Dieses Objekt verfügt über eine Methode, um Bubeln oder Ereignisse zu verhindern. Warum sage ich, dass es niemanden gibt? Die Frage dieses Freundes ist sinnvoll, aber wenn wir diese Methode verwenden möchten, um die Durchführung zu reduzieren, wird unser Code mit der Beziehung zwischen den Elementen des Vaters und dem Sohnelemente und der Beziehung zwischen Großvaterelement umgehen. Wenn die Seitenelemente viel verschachtelt sind, ist dies eine Aufgabe, die nicht erledigt werden kann. Meine Antwort lautet, dass das Problem des Traverses nicht geändert werden kann und wir uns nur daran anpassen können.
Es scheint, dass die Reduzierung des Durchgangs nicht das Leistungsproblem des Ereignissystems lösen kann, sodass wir jetzt nur den Speicherverbrauch in Betracht ziehen können. Ich höre oft Leute sagen, dass C# sehr nützlich ist, aber es ist noch besser für die Entwicklung von Web-End-Entwicklung. Wir können eine Schaltfläche direkt zur Seite in der C# IDE ziehen. Nachdem die Schaltfläche die Seite erreicht hat, fügt der JavaScript -Code automatisch ein Ereignis zur Schaltfläche hinzu. Natürlich ist die Ereignisfunktion im Inneren eine leere Funktion. Ich denke, wir können auf diese Weise 100 Tasten auf der Seite platzieren. Wenn ein einzelner Code nicht funktioniert, gibt es eine 100 -Button -Ereignisverarbeitung, was super bequem ist. Schließlich fügen wir einem der Schaltflächen ein bestimmtes Schaltflächenereignis hinzu, damit die Seite ausgeführt wird. Ist diese Seite effizient? In JavaScript ist jede Funktion ein Objekt, und jedes Objekt verbraucht Speicher. Daher muss dieser nutzlose 99 -Ereignisfunktionscode viele wertvolle Browserspeicher verbrauchen. Natürlich werden wir dies in der realen Entwicklungsumgebung nicht tun, aber in der heutigen Ära der populären und einseitigen Entwicklung von AJAX ist es verrückt und beliebt. Es gibt so viele Veranstaltungen auf einer Webseite, was bedeutet, dass jedes Ereignis eine Ereignisfunktion hat, aber jede Operation, die wir nur ein Ereignis auslösen. Zu diesem Zeitpunkt schlafen andere Ereignisse beim Liegen, was keine Rolle spielt und der Computerspeicher verbraucht.
Wir brauchen eine Lösung, um diese Situation zu verändern, und in der Realität gibt es in der Tat eine solche Lösung. Um diesen Plan klar zu beschreiben, möchte ich zuerst einige Hintergrundwissen hinzufügen. Bei der Diskussion der DOM2 -Ereignisverarbeitung erwähnte ich das Konzept des Zielobjekts. Abgesehen von der DOM2 -Ereignisverarbeitungsmethode gibt es auch das Konzept des Zielobjekts in der Verarbeitung von Ereignisverarbeitung und Bubble -Ereignis. Das Zielobjekt ist das DOM -Element des spezifischen Betriebs des Ereignisses. Beispielsweise ist die Schaltfläche in der Schaltfläche Klick das Zielobjekt. Unabhängig davon, welche Ereignisverarbeitungsmethode die Ereignisfunktion enthält, enthält ein Ereignisobjekt. Das Ereignisobjekt hat ein Attributziel, das Ziel zeigt immer auf das Zielobjekt und das Ereignisobjekt hat ein anderes Attribut, das aktuelle Target, das auf das DOM -Element hinweist, das zum Capture- oder Blasenereignis fließt. Aus der obigen Beschreibung wissen wir, dass der Ereignisfluss zum Dokument fließt, ob es sich um ein Capture -Ereignis oder ein Bubble -Ereignis handelt. Wenn wir im Dokument ein Klickereignis hinzufügen und die Schaltfläche auf der Seite kein Klickereignis hinzufügt, klicken wir auf die Schaltfläche und wissen, dass das Klickereignis im Dokument ausgelöst wird. Es gibt hier ein Detail, dass das Ziel des Ereignisziels, wenn das Dokument -Klick -Ereignis ausgelöst wird, eher die Schaltfläche als das Dokument ist, sodass wir den Code wie diesen schreiben können:
Die Codekopie lautet wie folgt:
<Eingabe type = "button" id = "btn" name = "btn" value = "button"/>
<a href = "#" id = "aa"> aa </a>
document.addeventListener ("klicken", function (evt) {
var target = evt.target;
Switch (target.id) {
Fall "Btn":
alert ("button");
brechen;
Fall "AA":
alarm ("a");
brechen;
}
},FALSCH);
Wir stellten fest, dass der Effekt dem Ereignis entspricht, den wir den Button separat geschrieben haben. Aber seine Vorteile sind selbstverständlich. Eine Funktion übernimmt die Ereignisfunktion der gesamten Seite, und es ist keine Ereignisfunktion im Leerlauf, was perfekt ist. Dieser Plan hat auch einen professionellen Namen: Event -Delegation. Die Delegiermethode von JQuery erfolgt nach diesem Prinzip. Tatsächlich spiegelt sich die Effizienz der Ereignisdelegation nicht nur in der Reduzierung von Ereignisfunktionen wider, sondern reduziert auch DOM -Durchlaufoperationen. Zum Beispiel fügen wir im obigen Beispiel eine Funktion im Dokument hinzu. Das Dokument ist das oberste Objekt auf der Seite, und die Effizienz des Lesens ist sehr hoch. Wenn es um bestimmte Objektereignisse geht, verwenden wir den DOM -Vorgang nicht, sondern das Zielattribut des Ereignisobjekts. All dies kann nur in einem Satz zusammengefasst werden: Es ist sehr schnell, kein Grund, schnell zu sein.
Die Event-Delegation kann uns auch ein großartiges Nebenprodukt bringen. Freunde, die JQuery verwendet haben, sollten die Live -Methode anwenden haben. Die Funktion der Live -Methode ist, dass Sie Seitenelementen Ereignisvorgänge hinzufügen können. Auch wenn dieses Element derzeit nicht auf der Seite vorhanden ist, können Sie seine Ereignisse hinzufügen. Nach dem Verständnis des Ereignisdelegationsmechanismus ist das Live -Prinzip leicht zu verstehen. Tatsächlich erfolgt Jquerys Live durch Event -Delegation, und Live ist auch eine effiziente Möglichkeit, Ereignisse hinzuzufügen.
Nach dem Verständnis der Ereignisdelegation werden wir feststellen, dass die Bindungsmethode von JQuery eine ineffiziente Methode ist. Da es die ursprüngliche Ereignisdefinitionsmethode verwendet, sollten wir Bind mit Vorsicht verwenden. Tatsächlich haben JQuery -Entwickler dieses Problem ebenfalls bemerkt. Die neue Version von JQuery hat eine On -Methode. Die On -Methode enthält alle Funktionen von Bind-, Live- und Delegiertenmethoden. Ich schlage daher vor, dass Freunde, die diesen Artikel gelesen haben, die vorherige Methode zum Hinzufügen von Ereignissen aufgeben und auf Funktionen zum Hinzufügen von Ereignissen verwenden sollten.
Die Ereignisdelegation hat einen weiteren Vorteil. Im Beispiel der Ereignisdelegation im obigen Artikel habe ich dem Dokument Ereignisse hinzugefügt. Hier möchte ich einen Vergleich machen. In JQuery sind wir es gewohnt, die Definition von DOM -Elementereignissen in die Ready -Methode zu setzen, wie unten gezeigt:
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (function () {
Xxx.bind ("click", function () {});
});
Die Ready -Funktion wird ausgeführt, nachdem das Seitendom -Dokument geladen wurde. Es wird zuerst ausgeführt als die Onload -Funktion. Dies hat viele Vorteile im Voraus. Einer der Vorteile ist auch die Verbesserung der Leistung. Die Definition von Ereignis wie JQuery ist auch eine Standardpraxis. Ich glaube, einige Freunde müssen bestimmte Ereignisse außerhalb von Ready binden und schließlich feststellen, dass der Knopf ungültig ist. Dieses ungültige Szenario dauert manchmal einen Moment und es wird nach einer Weile in Ordnung. Daher ignorieren wir oft das Prinzip dieses Problems und binden Ereignisse nicht in der Bereitschaftsfunktion. Diese Operation verbindet tatsächlich Ereignisse, bevor das DOM geladen wird, und in diesem Zeitraum binden wir tatsächlich Ereignisse an sie. Es ist sehr wahrscheinlich, dass einige Elemente nicht auf der Seite konstruiert wurden, daher ist die Ereignisbindung ungültig. Daher ist der Grund für die Definition von Ereignissen sicher, dass alle Elemente der Seite geladen werden, um Ereignisse des DOM -Elements nach dem Laden zu definieren. Bei der Verwendung von Ereignisdelegierten können jedoch Probleme vermieden werden. Zum Beispiel: Bindung von Ereignissen an ein Dokument repräsentiert das Dokument die gesamte Seite, daher ist es die früheste Zeit, es zu laden. Daher ist es schwierig, Ereignisdelegierte im Dokument zu erreichen, und es ist auch schwierig, den Browser "XXX -Funktion undefiniert" zu melden. Um diese Funktion zusammenzufassen: Der Ereignisdelegate -Code kann in jeder Phase des Seitenladens ausgeführt werden, wodurch Entwickler eine größere Freiheit bei der Verbesserung der Webseitenleistung oder zur Verbesserung der Webseiten -Effekte bieten.
Ok, dieser Artikel wurde geschrieben. Gute Nacht.