Ausführliche Erklärung der Ereignisdelegation in Javascript

Ich habe in letzter Zeit eine Interviewfrage gesehen, in der Sie aufgefordert wurden, zu 1.000 Li ein Klickereignis hinzuzufügen In diesem Fall wird GG während des Interviews geschätzt. Hier haben wir unseren Mechanismus zum Sprudeln und Erfassen von Ereignissen sowie den Mechanismus zum Delegieren von Ereignissen zurückgezogen 🎜> Lassen Sie uns zunächst über die Event-Bubbling- und Event-Capturing-Mechanismen sprechen, die von Microsoft vorgeschlagen wurden, und über die Event-Bubbling-Mechanismen, die von Netscape vorgeschlagen wurden. Später hatten die beiden Unternehmen keine andere Wahl, als sie zu übernehmen Dies ist ein Kompromiss. Nachdem das Ereignis generiert wurde, wird es zuerst erfasst und dann in die Luft gesprudelt.

Normalerweise gibt es drei Möglichkeiten, Ereignisse in js abzuhören, nämlich:

ele.addEventListener (type,listener ,[useCapture]);//IE6~8 unterstützt nicht

　ele.attachEvent('on'+type,listener);//IE6~10 unterstützt nicht, IE11 unterstützt nicht

　ele. onClick=function(){};//Alle Browser unterstützen

Die w3c-Spezifikation definiert drei Ereignisphasen: die Erfassungsphase, die Zielphase und die Blasenphase. und die von w3c spezifizierten dom2-Level-Vorschriften. In wird addEventListener verwendet, um auf Ereignisse zu warten. Zunächst einmal sind gefälschte Blasen so, als ob die Blasen im Wasser so wären Von unten auftauchen, was bedeutet, dass die Blasen im Wasser von unten in Richtung des übergeordneten Elements aufsteigen, während der Einfangmechanismus genau das Gegenteil ist Der Einfangmechanismus löst Ereignisse aus vom übergeordneten Element zum untergeordneten Element, und der dritte Parameter in der Funktion addEventListener wird verwendet, um zu entscheiden, ob der Erfassungsmechanismus oder der Bubbling-Mechanismus verwendet werden soll. Wenn useCapture wahr ist, handelt es sich um einen Erfassungsmechanismus, wenn useCapture falsch ist ist ein Blasenmechanismus. Schauen wir uns das Beispiel an:

Code kopieren

<div class="parent">
  <div class="child">
 
  </div>
</div>
<script>
  var parent = document.getElementsByClassName(&#39;parent&#39;)[0];
  var child = document.getElementsByClassName(&#39;child&#39;)[0];
 
  parent.addEventListener(&#39;click&#39;,function(){
    console.log("这里是父元素");
  },false);
  child.addEventListener(&#39;click&#39;,function(){
    console.log("这里是子元素");
  },false);
</script>

Wenn wir auf das untergeordnete Element klicken, wird das obige Bild angezeigt Wenn wir „false“ in „true“ ändern, wird die Ausführungsreihenfolge umgekehrt. Dies ist der Unterschied zwischen Ereignissprudeln und -erfassung. Sie sind genau das Gegenteil 🎜> Der Nachteil dieses Bindungsmechanismus besteht darin, dass es besonders umständlich ist, Ereignisse an jedes Objekt zu binden Assoziation zwischen JavaScript und DOM-Knoten, und es wird jederzeit zu zirkulären Referenzen kommen, was wahrscheinlich zu Speicherverlusten führt.

Dann lösen Sie dieses Problem. Diese Methode ist Dadurch können Sie vermeiden, jedem Knoten einzeln Ereignisse hinzuzufügen. Dies geschieht durch die Bindung dieser Überwachungsereignisse an die übergeordneten Elemente dieser Knoten. Die Überwachungsfunktion des übergeordneten Elements bestimmt automatisch, welches untergeordnete Element das Ereignis ausgelöst hat Bearbeiten Sie das untergeordnete Element, das das Ereignis ausgelöst hat. Das Beispiel, das wir hier geben, ist ein Beispiel von Davidwalsh:

Jetzt haben wir ein übergeordnetes Element ul und mehrere untergeordnete Elemente li,

Was wir wollen Jetzt erreichen wir, dass, wenn wir auf jeden Li-Knoten klicken, der Inhalt des Li-Knotens ausgegeben wird, wie oben gezeigt. In der Schreibweise können Sie diese Li auswählen, ihnen diese Methoden hinzufügen und sie dann entfernen, wenn sie vorhanden sind Wenn es 100 Li oder 1000 Li gibt, wird dies zu Ihrem Albtraum. Die nächste Frage ist, wie wir feststellen können, auf welches Li geklickt wurde Ziel des aktuellen Ereignisses im Listening-Ereignis, um zu bestimmen, ob es der Knoten ist, nach dem wir suchen. Hier haben wir ein einfaches Beispiel:

Wenn ein Klickereignis in ul auftritt, weil addEventListener ein Bubbling-Ereignis ist Standardmäßig wird das Listening-Ereignis ausgeführt, wenn das zugrunde liegende Ereignis ausgelöst wird. Um festzustellen, ob es sich um das gesuchte Zielelement handelt, wird es ignoriert. Dann können wir nicht nur prüfen, ob das Tag des Zielelements ist das Zielelement, das wir benötigen, aber wir können dies auch basierend auf den Attributen oder Klassennamen des Zielelements tun. Zur Erkennung verwenden Sie die ele.maeches-API zur Verarbeitung,

Daher können wir sehen, dass die Verwendung von Event-Proxy uns viel Komfort bringen und viele Fallstricke vermeiden kann.