Ereignisdelegation in JavaScript (jQuery)

1: Was ist Eventdelegation?

Die Ereignisdelegation verwendet Ereignis-Bubbling, um nur einen Ereignishandler anzugeben, der alle Ereignisse eines bestimmten Typs verwaltet.

2: Warum Ereignisdelegation verwenden?

1. Die Anzahl der der Seite in JavaScript hinzugefügten Ereignishandler steht in direktem Zusammenhang mit der Gesamtleistung der Seite. Warum? Da jede Ereignisbehandlungsfunktion ein Objekt ist, belegt das Objekt den Speicher. Je mehr Objekte sich im Speicher befinden, desto schlechter ist die Leistung. Darüber hinaus verzögert die Anzahl der DOM-Besuche, die dadurch verursacht werden, dass alle Event-Handler im Voraus angegeben werden müssen, die interaktive Bereitschaftszeit der gesamten Seite.
2. Ereignisse einzeln zu einer Tabelle mit vielen Daten und einer langen Liste hinzuzufügen, ist ein Albtraum. Daher kann die Ereignisdelegierung die Ausführungsleistung der Seite erheblich verbessern und die Arbeitsbelastung der Entwickler verringern.

Drei: Beispiele in JavaScript

Nehmen wir den folgenden HTML-Code als Beispiel und verwenden die Ereignisdelegation, um zu erkennen, dass, wenn die Maus auf ein li-Element klickt, Der Hintergrund des Li-Elements wird rot.

       <ul id = "lists">
         <li>列表1</li>
         <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
         <li>列表5</li>
          <li>列表6</li>
   </ul>

Das Folgende ist der JavaScript-Code:

var lists = document.getElementById("lists"); 
          lists.addEventListener("click",function(event){
              var target = event.target;
              //防止父元素ul也触发事件
              if(target.nodeName == "LI"){
                 target.style.backgroundColor = "red";
              }
         })

Klicken Sie auf Liste 4, um den Effekt zu erzielen:

Viertens: Beispiele in jQuery

Die Ereignisdelegierungsmethoden in jQuery sind relativ umfangreich: Nehmen wir das gleiche Beispiel:

1 Verwenden Sie die on-Methode, der Code lautet folgt:

 $(function(){
            $("#lists").on("click","li",function(event){
                 var target = $(event.target);
                 target.css("background-color","red");
             })
         })

2. Verwenden Sie die Methode „delegate()“. Der Code lautet wie folgt:

$(function(){
            $("#lists").delegate("li","click",function(event){
                var target = $(event.target);
                 target.css("background-color","red");
             })
         })

Die Methode „on()“ ist der Methode „delegate()“ für Ereignisse sehr ähnlich Delegation. Und wenn die Ereignisdelegierung ausgeführt wird, löst nur das untergeordnete Element (li in diesem Artikel) das Ereignis aus, und das übergeordnete Element (ul in diesem Artikel) löst das Ereignis nicht aus, sodass wir den auslösenden Elementknotennamen nicht beurteilen müssen Das Ereignis ist deutlich besser als natives JavaScript.

3. Verwenden Sie die bind()-Methode. Der Code lautet wie folgt:

$(function(){
             $("#lists").bind("click","li",function(event){
                 var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                 target.css("background-color","red");}
             })
         })

Die bind()-Methode ist dieselbe wie die native JavaScript-Implementierungsmethode, wenn das übergeordnete Element das Ereignis ausführt Im Namen des untergeordneten Elements löst auch das übergeordnete Element ein Ereignis aus. Daher müssen wir den Elementnamen ermitteln, der das Ereignis auslöst. Wenn Sie außerdem die Methode bind() zum Binden von Ereignissen an Elemente verwenden, beachten Sie bitte, dass diese nur Ereignisse zu vorhandenen DOM-Elementen und keine Ereignisse zu zukünftigen DOM-Elementen hinzufügen kann.

Element fügt Ereignis hinzufügen hinzu. Wenn Sie häufig DOM-Elemente hinzufügen und Ereignisse an die neu hinzugefügten DOM-Elemente binden möchten, verwenden Sie live(), delegate(), on() und andere Methoden. Da jQuery die Methoden „live()“ und „delegate()“ seit jQuery 1.7 nicht mehr empfiehlt, sollten Sie weiterhin die Methode „on()“ verwenden.

Das obige ist der detaillierte Inhalt vonEreignisdelegation in JavaScript (jQuery). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!