JavaScript -Ereignisdelegation ist einfacher als Sie denken

Key Takeaways

• JavaScript -Event -Delegation ist eine Technik, die die Leistung verbessert, indem die Anzahl der benötigten Ereignishandler reduziert werden. Anstatt einzelne Ereignishandler an jedes Element anzubringen, wird einem übergeordneten Element ein einzelner Ereignishandler hinzugefügt, der Ereignisse für alle seine untergeordneten Elemente bearbeitet. 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 entstanden ist. Daher ist es wichtig, Ihren Ereignisdelegationscode sorgfältig zu verwalten, um diese potenziellen Probleme zu vermeiden. Die Wahrheit ist, wenn Sie bereits wissen, wie Sie JavaScript-Ereignis-Handler hinzufügen, ist es ein Schnappschuss für die Implementierung. 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. JavaScript -Ereignis -Delegation ist eine einfache Technik, mit der Sie einem übergeordneten Element einen einzelnen Ereignishandler hinzufügen, um zu vermeiden, dass Ereignishandler zu mehreren untergeordneten Elementen hinzugefügt werden müssen.

  Wie funktioniert es? Wenn ein Ereignis in einem Element ausgelöst wird, beispielsweise eine Mausklick auf eine Schaltfläche, wird das gleiche Ereignis auch für alle 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 Ereignisdelegation ist es möglich, einem Element einen Ereignishandler hinzuzufügen, zu warten, bis ein Ereignis von einem untergeordneten Element ausgeblendet wird und einfach feststellt, aus welchem ​​Element das Ereignis entstanden ist. 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 dem Tabellenelement nur einen Ereignishandler hinzufügen, das Klickereignis abfangen und bestimmen, auf welcher Zelle geklickt wurde.

  Was sieht es im Code aus? 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 Ereignis -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 ein Streuling des Cross-Browser-Code, um das Zielelement zu erhalten und zurückzugeben, das in der Srcelement-Eigenschaft in Internet Explorer und die Zieleigenschaft in anderen Browsern gespeichert ist. 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') {// Mach etwas mit der Zelle}} 

  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 Anwendung passt.

  Was sind die Vor- und Nachteile? Dies ist der große; Bessere Leistung und weniger Abstürzung. Wenn Ihr Seiteninhalt dynamisch über Ajax generiert wird, müssen Sie beispielsweise Ereignishandler nicht hinzufügen und entfernen, da Elemente geladen oder entladen werden. Blase. 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 IE) statt der sprudelnden Phase zugegriffen werden, aber das ist eine Geschichte für einen anderen Tag.

• Sie müssen bei der Verwaltung einiger Mausereignisse Vorsicht benötigen. 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. Ui. Sie können auch Beispiele finden, die überhaupt keine Bibliothek verwenden, wie diese aus dem nutzbaren Typ -Blog.

  Ereignisdelegation ist ein praktisches Tool in Ihrem Kit, falls die Notwendigkeit und einfach zu implementieren ist. 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 Tabellenzeilen befassen. 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. Mit dieser Eigenschaft können Sie feststellen, wie Sie das Ereignis behandeln. 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 Blasen erfolgen. Diese Methode verhindert, dass das Ereignis den Dom -Baum aufbricht. Seien Sie jedoch vorsichtig, wenn Sie diese Methode verwenden, da sie verhindern können, dass andere Ereignishandler ausgelöst werden. Dieser Hörer wird nur Ereignisse für dieses spezielle Element behandeln. 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 wenn ich mit einer großen Anzahl ähnlicher Elemente zu tun habe.

  Kann ich eine Ereignisdelegation mit dynamisch hinzugefügten Elementen verwenden? Da der Ereignishörer an ein übergeordnetes Element angehängt ist, kann er Ereignisse für untergeordnete Elemente verarbeiten, die nach dem Anhängen des Hörers zum DOM hinzugefügt werden. Um sich auf das Element zu beziehen, das das Ereignis ausgelöst hat, können Sie die Eigenschaft "Ziel" des Ereignisobjekts verwenden. Die Methode '.on ()' nimmt drei Argumente an: den Ereignisart, einen Selektor für die untergeordneten Elemente und den Ereignishandler. Durch das Anhängen 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 Verbesserung der Leistung führen kann. Genannte Ereignisse können genau wie integrierten Ereignissen den DOM-Baum aufsprudeln, 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!