Beispiel für JavaScript-Ereignisdelegierungstechnologie: Analyse_Javascript-Kenntnisse

In diesem Artikel wird die JavaScript-Ereignisdelegationstechnologie anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wenn eine ganze Seite eine große Anzahl von Schaltflächen enthält, müssen wir Ereignishandler an jede Schaltfläche binden. Dies wirkt sich auf die Leistung aus.

Erstens ist jede Funktion ein Objekt und das Objekt belegt viel Speicher. Je mehr Objekte sich im Speicher befinden, desto schlechter ist die Leistung

Zweitens führt eine Zunahme der DOM-Besuche zu einer Verzögerung beim Laden der Seite. Tatsächlich gibt es immer noch gute Lösungen, wie man Event-Handler sinnvoll nutzt.

Veranstaltungsdelegierter:

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

Die Event-Delegationstechnologie nutzt die Event-Bubbling-Funktion. Geben Sie einfach einen Event-Handler an.

Wir können Ereignishandler an ein übergeordnetes Element binden, das ein Ereignis auslösen muss.

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

Jetzt müssen wir Event-Handler für diese 3 LIs binden.

Es muss nur der Event-Handler in ul. gebunden werden.

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

Bei einer komplexen Webanwendung ist diese Art der Ereignisdelegation sehr praktisch.

Wenn Sie diese Methode nicht verwenden, führt das einzelne Binden zu unzähligen Event-Handlern.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.