JavaScript -Ereignisdelegation ist einfacher als Sie denken

Key Takeaways

• Die JavaScript -Event -Delegation ist eine Technik, die die Leistung verbessert, indem die Anzahl der benötigten Ereignishandler verringert werden. Anstatt einzelne Ereignishandler an jedes Element anzubringen, wird einem übergeordneten Element ein einzelner Ereignishandler hinzugefügt, der Ereignisse für alle seine Kinderelemente bearbeitet.
• Die Ereignisdelegation arbeitet durch Ereignisblasen und das Zielelement. Wenn ein Ereignis ausgelöst wird, aktiviert es auch auf allen Vorfahren des Elements, einem Prozess, der als Ereignis sprudelt. Das Zielelement, das Ursprungselement des Ereignisses, wird in einer Eigenschaft des Ereignisobjekts gespeichert, sodass Sie feststellen können, wo das Ereignis stammt.
• Während die Ereignisdelegation die Leistung verbessert und die Speicherverwendung verringert, kann nicht alle Ereignisse sprudeln, und der Umgang mit einigen Mausereignissen kann möglicherweise zu einem Performance -Engpass werden. Daher ist es wichtig, Ihren Ereignisdelegationscode sorgfältig zu verwalten, um diese potenziellen Probleme zu vermeiden.

Wenn Sie Ihren Webseiten eine kleine JavaScript -Interaktivität hinzufügen möchten, haben Sie möglicherweise von der Delegation von JavaScript -Ereignissen gehört und dachten, es sei eines dieser verworrenen Designmuster, über die sich nur Hardcore -JavaScript -Programmierer Sorgen machen. Die Wahrheit ist, wenn Sie bereits wissen, wie Sie JavaScript -Ereignishandler hinzufügen, ist es ein Schnappschuss für die Implementierung.

JavaScript-Ereignisse sind das Fundament aller Interaktivität auf Webseiten (ich meine ernsthafte Interaktivität, nicht die Dinky CSS-Dropdown-Menüs). Bei der traditionellen Event -Handhabung fügen oder entfernen Sie Ereignishandler nach Bedarf aus jedem Element. Ereignishandler können jedoch möglicherweise auf Speicherlecks und Leistungsverschlechterungen verursachen - je mehr Sie haben, desto größer ist das Risiko. Die JavaScript -Ereignisdelegation ist eine einfache Technik, mit der Sie einem übergeordneten Element einen einzelnen Ereignis -Handler hinzufügen, um nicht mehreren untergeordneten Elementen Ereignishandler hinzuzufügen.

Wie funktioniert es?

Die Ereignisdelegation verwendet zwei oft übersehene Merkmale von JavaScript -Ereignissen: Ereignisspubbling und das Zielelement. Wenn ein Ereignis in einem Element ausgelöst wird, beispielsweise eine Mausklick auf eine Schaltfläche, wird das gleiche Ereignis auch bei allen Vorfahren dieses Elements ausgelöst. Dieser Prozess ist als Ereignis zu sprudeln. Das Ereignis sprudelt vom Ursprungselement bis zur Oberseite des Dom -Baumes. Das Zielelement eines beliebigen Ereignisses ist das Ursprungselement, die Schaltfläche in unserem Beispiel, und wird in einer Eigenschaft des Ereignisobjekts gespeichert. Mit der Ereignisdelegation ist es möglich, einem Element einen Ereignishandler hinzuzufügen, warten Sie, bis ein Ereignis von einem untergeordneten Element aufgeblasen wird und einfach feststellt, aus welchem ​​Element das Ereignis entstanden ist.

Wie wird es mir helfen?

Stellen Sie sich eine HTML -Tabelle mit 10 Spalten und 100 Zeilen vor, in denen etwas passieren soll, wenn der Benutzer auf eine Tabellenzelle klickt. Zum Beispiel musste ich einmal jede Zelle einer Tabelle dieser Größe bearbeitbar machen, wenn ich klickte. Das Hinzufügen von Ereignishandlern zu jedem der 1000 Zellen wäre ein Hauptleistungsproblem und möglicherweise eine Quelle für Browser-Crashing-Speicher-Lecks. Stattdessen würden Sie mithilfe der Ereignisdelegation nur einen Ereignishandler zum Tabellenelement hinzufügen, das Klickereignis abfangen und bestimmen, auf welcher Zelle geklickt wurde.

Wie sieht es im Code aus?

Der Code ist einfach; Wir müssen uns nur Sorgen machen, das Zielelement zu erkennen. Angenommen, wir haben ein Tabellenelement mit dem ID „Bericht“ und wir haben der Tabelle einen Ereignishandler für das Klickereignis hinzugefügt, bei dem die Funktion "Editcell" aufgerufen wird. Die editCell -Funktion muss das Zielelement für das Ereignis bestimmen, das sich auf die Tabelle befasst hat. Wenn wir erwarten, dass wir einige Event -Handler -Funktionen schreiben, die diese Funktionalität benötigen, geben wir sie in eine separate Funktion namens GetEventTarget:

 Funktion geteventTarget (e) {
  e = e || Fenster.Event;
  return e.target || e.srcelement;
}

Die Variable E repräsentiert das Ereignisobjekt und wir benötigen nur eine Streuung des Cross-Browser-Codes, um Zugriff auf das Zielelement zu erhalten und zurückzugeben, das in der SRCelement-Eigenschaft in Internet Explorer und der Zieleigenschaft in anderen Browsern gespeichert ist.

Als nächstes ist die Funktion editcell, die die GetEventTarget -Funktion aufruft. Sobald wir einen Verweis auf das Zielelement haben, liegt es an uns, sicherzustellen, dass das Element das ist, das wir erwarten:

 Funktion editcell (e) {
  var target = getEventTarget (e);
  if (target.tagname.tolowerCase () === 'td') {
    // etwas mit der Zelle mach
  }
}

In der Funktion editCell bestätigen wir, dass das Zielelement eine Tabellenzelle ist, indem er den Tag -Namen überprüfen. Diese Überprüfung kann vereinfacht sein; Was ist, wenn es ein weiteres Element in der Tabellenzelle ist, das das Ziel des Ereignisses ist? Eine schnelle Änderung, die den Code hinzufügt, um das übergeordnete TD -Element zu finden, kann erforderlich sein. Was ist, wenn einige Zellen nicht bearbeitet werden sollten? In diesem Fall können wir einer nicht eedierbaren Zelle einen bestimmten Klassennamen hinzufügen und überprüfen, ob das Zielelement diesen Wert für den Klassennamen nicht hat, bevor er bearbeitbar wird. Viele Optionen sind verfügbar und Sie müssen nur die auswählen, die zu Ihrer Bewerbung passt.

Was sind die Vor- und Nachteile?

Die Vorteile der JavaScript -Ereignisdelegation sind:

• Es gibt weniger Event -Handler zum Einrichten und wohnen im Speicher. Dies ist der große; Bessere Leistung und weniger Absturz.
• Nach einem DOM-Update müssen keine Handler wieder eintreffen. Wenn Ihr Seiteninhalt dynamisch über Ajax generiert wird, müssen Sie beispielsweise Ereignishandler nicht hinzufügen und entfernen, wenn Elemente geladen oder entladen werden.

Die potenziellen Probleme mögen weniger klar sein, aber sobald Sie sich ihrer bewusst sind, werden sie leicht vermieden:

• Es besteht ein Risiko, dass Ihr Event -Management -Code zu einem Leistungsting sein könnte. Halten Sie ihn also so schlank wie möglich.
• Nicht alle Ereignisse sprudeln. Die Unschärfe-, Fokus-, Last- und Entladeereignisse sprudeln nicht wie andere Ereignisse. Auf die Unschärfe- und Fokusereignisse können tatsächlich mit der Erfassungsphase (in anderen Browsern als dem IE) statt der sprudelnden Phase zugegriffen werden, aber das ist eine Geschichte für einen anderen Tag.
• Sie benötigen Vorsicht, wenn Sie einige Mausereignisse verwalten. Wenn Ihr Code mit dem Mousemove -Ereignis umgeht, besteht ein ernstes Risiko, einen Performance -Engpass zu erstellen, da das Mousemove -Ereignis so oft ausgelöst wird. Das Mausout -Ereignis hat ein eigenartiges Verhalten, das mit der Ereignisdelegation schwer zu verwalten ist.

Zusammenfassung

Es gibt Beispiele für JavaScript -Ereignis -Delegation, die wichtige Bibliotheken verwenden: JQuery, Prototyp und Yahoo! Ui. Sie können auch Beispiele finden, die überhaupt keine Bibliothek verwenden, wie diese aus dem nutzbaren Typ -Blog.

Die Event -Delegation ist ein praktisches Tool in Ihrem Kit, falls der Bedarf auftreten und einfach zu implementieren ist.

Häufig gestellte Fragen zur JavaScript -Ereignisdelegation

Was ist der Hauptvorteil der Verwendung von Ereignisdelegation in JavaScript?

Die Ereignisdelegation in JavaScript ist eine Technik, die den Ereignissprudelprozess nutzt. Der Hauptvorteil der Verwendung von Ereignisdelegation besteht darin, dass die Leistung die Leistung erheblich verbessert, indem die Anzahl der an die Elemente angeschlossenen Ereignishörer reduziert wird. Anstatt einzelne Ereignishörer an jedes Element anzuhängen, fügen Sie einen einzelnen Ereignishörer einem übergeordneten Element an. Dieser Zuhörer übernimmt dann Ereignisse für alle seine Kinderelemente. Dies ist besonders vorteilhaft, wenn Sie sich mit einer großen Anzahl ähnlicher Elemente wie Listenelemente oder Tabellenreihen befassen.

Wie funktioniert Event -Delegation in JavaScript?

Die Ereignisdelegation funktioniert, indem er den Ereignis -Sprudelprozess in JavaScript ausnutzt. Wenn ein Ereignis auf einem untergeordneten Element auftritt, sprudelt es durch den Dom -Baum und löst dasselbe Ereignis für jedes seiner übergeordneten Elemente aus. Indem Sie einen Ereignishörer an ein übergeordnetes Element anhängen, können Sie Ereignisse für alle seine Kinderelemente erledigen. Das an den Ereignishandler übergebene Ereignisobjekt enthält eine 'Ziel' Eigenschaft, die sich auf das tatsächliche Element bezieht, das das Ereignis ausgelöst hat. Sie können diese Eigenschaft verwenden, um zu bestimmen, wie Sie mit dem Ereignis umgehen.

Kann eine Ereignisdelegation mit einem Ereignis in JavaScript verwendet werden?

Ja, die Ereignisdelegation kann mit jedem Ereignis in JavaScript verwendet werden, das sprudelt. Allerdings sprudeln nicht alle Ereignisse. Zum Beispiel sprudeln die Ereignisse "Fokus" und "Unschärfe" nicht in allen Browsern. Für diese Ereignisse können Sie stattdessen die Ereignisse "Focusin" und "Focusout" verwenden, die Bubble machen.

Wie kann ich das Ereignis in JavaScript stoppen?

Sie können das Ereignis einstellen, das in JavaScript sprudelt, indem Sie die Methode "StopPropagation" des Ereignisobjekts verwenden. Diese Methode verhindert, dass das Ereignis den Dom -Baum aufbricht. Seien Sie jedoch vorsichtig, wenn Sie diese Methode anwenden, da sie verhindern können, dass andere Ereignishandler ausgelöst werden.

Was ist der Unterschied zwischen Ereignisdelegation und Ereignisbindung in JavaScript?

Die Ereignisbindung in JavaScript beinhaltet das Anbringen eines Ereignishörers direkt an ein Element. Dieser Hörer behandelt nur Ereignisse für dieses spezielle Element. Auf der anderen Seite beinhaltet die Ereignisdelegation einen Ereignishörer an ein übergeordnetes Element, das Ereignisse für alle seine Kinderelemente übernimmt. Diese Technik ist effizienter, insbesondere im Umgang mit einer großen Anzahl ähnlicher Elemente.

Kann ich eine Ereignisdelegation mit dynamisch hinzugefügten Elementen verwenden?

Ja, einer der Hauptvorteile der Ereignisdelegation besteht darin, dass es mit dynamisch hinzugefügten Elementen funktioniert. Da der Ereignishörer an ein übergeordnetes Element angeschlossen ist, kann er Ereignisse für untergeordnete Elemente verarbeiten, die nach dem Anhängen des Hörers zum DOM hinzugefügt werden.

Wie kann ich die Ereignisdelegation mit dem Schlüsselwort "This" in JavaScript verwenden?

Bei der Verwendung von Ereignisdelegation bezieht sich das Schlüsselwort 'This' im Ereignishandler auf das Element, an das der Ereignishörer angehängt ist, und nicht auf das Element, das das Ereignis ausgelöst hat. Um sich auf das Element zu beziehen, das das Ereignis ausgelöst hat, können Sie die Eigenschaft "Ziel" des Ereignisobjekts verwenden.

Kann ich eine Event -Delegation mit JQuery verwenden?

Ja, JQuery bietet die Methode '.on ()', mit der Sie die Ereignisdelegation implementieren können. Die Methode '.on ()' nimmt drei Argumente an: den Ereignisart, einen Selektor für die Kinderelemente und den Event -Handler.

Wie wirkt sich die Leistung der Ereignisdelegation aus?

Die Ereignisdelegation kann die Leistung erheblich verbessern, insbesondere im Umgang mit einer großen Anzahl ähnlicher Elemente. Durch das Anbringen eines einzelnen Ereignishörers an ein übergeordnetes Element reduzieren Sie die Anzahl der Ereignishörer, die vom Browser verwaltet werden müssen, was zu einer spürbaren Leistungsverbesserung führen kann.

Kann ich eine Ereignisdelegation mit benutzerdefinierten Ereignissen in JavaScript verwenden?

Ja, Sie können die Ereignisdelegation mit benutzerdefinierten Ereignissen in JavaScript verwenden. Genannte Ereignisse können genau wie integrierten Ereignissen den DOM-Baum aufblasen, sodass Sie sie mit einem einzelnen Ereignishörer verarbeiten können, der an ein übergeordnetes Element angeschlossen ist.

Das obige ist der detaillierte Inhalt vonJavaScript -Ereignisdelegation ist einfacher als Sie denken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!