Ausführliche Erläuterung von Beispielen für die Ereignisdelegierung zur Optimierung der Javascript-Leistung

In diesem Artikel wird die Ereignisdelegierung der JavaScript-Leistungsoptimierung anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verknüpfen Sie ein Klickereignis für jeden LI unten

Go somewhereDo somethingSay hi

1. Traditionelles Schreiben

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

In JavaScript steht die Anzahl der der Seite hinzugefügten Ereignishandler in direktem Zusammenhang mit der Gesamtleistung der Seite. Je mehr Ereignisse, desto schlechter Leistung.

Es gibt viele Gründe:

Jede Funktion ist ein Objekt und belegt den Speicher, desto schlechter ist die Leistung.
2. Die Anzahl der DOM-Zugriffe, die dadurch verursacht werden, dass alle Event-Handler im Voraus angegeben werden müssen, verzögert die interaktive Bereitschaftszeit der gesamten Seite.

2. Event-Delegation

Die Lösung für das Problem „zu vieler Event-Handler“ ist die Event-Delegation.

Die Ereignisdelegation verwendet Ereignis-Bubbling, um alle Ereignisse eines bestimmten Typs zu verwalten, indem nur ein Ereignishandler angegeben wird. Beispiel: Das Klickereignis wird bis zur Dokumentebene hochgesprudelt. Das heißt, wir können einen Onclick-Ereignishandler für die gesamte Seite angeben, ohne für jedes anklickbare Element einen Ereignishandler hinzufügen zu müssen.

Ereignisdelegationsmethode:

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

3. Vorteile der Verwendung der Ereignisdelegation:

1) Auf das Dokumentobjekt kann schnell zugegriffen werden, und Ereignishandler können zu jedem Zeitpunkt im Seitenlebenszyklus hinzugefügt werden (ohne auf DOMContentLoaded- oder Ladeereignisse warten zu müssen). Mit anderen Worten: Sobald ein anklickbares Element auf der Seite gerendert wird, ist es sofort funktionsfähig.

2) Es wird weniger Zeit benötigt, um Event-Handler auf der Seite einzurichten. Das Hinzufügen nur eines Event-Handlers erfordert weniger DOM-Referenzen und nimmt weniger Zeit in Anspruch.

3) Die gesamte Seite benötigt weniger Speicherplatz, was die Gesamtleistung verbessern kann.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial