Event-Delegation in Javascript (Bild- und Text-Tutorial)

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung der Ereignisdelegation in JavaScript vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

Ich habe in letzter Zeit eine Interviewfrage gesehen, in der Sie wahrscheinlich gebeten wurden, 1.000 Li zu geben Sollte ich ein Klickereignis hinzufügen? Der erste Eindruck, den die meisten Leute haben, ist, dass sie zu jedem Li eins hinzufügen werden Werfen wir einen Blick auf die oben genannten Mechanismen.

Lassen Sie uns zunächst über die Event-Bubbling- und Event-Capture-Mechanismen sprechen. Die beiden Unternehmen waren sich uneinig. Später musste das W3C eine Kompromissmethode anwenden. Wenn ein Ereignis auftritt, wird es zuerst erfasst und dann in die Luft gesprudelt in js, nämlich:

　

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

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

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

Die w3c-Spezifikation definiert drei Ereignisphasen: die Erfassungsphase, die Zielphase und die Bubbling-Phase. In den von w3c angegebenen Regeln auf Dom2-Ebene ist es der addEventListener, der auf Ereignisse wartet Wir werden addEventListener zur Erklärung verwenden. Blasen sind so, als ob die Blasen im Wasser vom Boden auftauchen, wenn Sie einen Stein ins Wasser werfen. Das bedeutet, dass die Blasen nach dem Auslösen des Ereignisses aufsteigen Das untergeordnete Element wird in Richtung des übergeordneten Elements ausgelöst, während der Erfassungsmechanismus genau das Gegenteil ist. Der Erfassungsmechanismus löst Ereignisse vom übergeordneten Element zum untergeordneten Element aus, und der dritte Parameter in der Funktion addEventListener wird verwendet, um zu entscheiden, ob die Funktion verwendet werden soll Capture-Mechanismus oder Bubbling-Mechanismus. Wenn useCapture true ist, ist es der Bubbling-Mechanismus. Schauen wir uns das Beispiel an:

Code kopieren

<p class="parent">
  <p class="child">

  </p>
</p>
<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 „falsch“ in „wahr“ ändern, werden wir feststellen, dass die Ausführungsreihenfolge umgekehrt wird. Dies ist der Unterschied zwischen Ereignissprudeln und -erfassung. Sie sind genau das Gegenteil:

Der Nachteil dieses Bindungsmechanismus besteht darin, dass es sehr mühsam ist, Ereignisse an jedes Objekt zu binden, wenn wir ein Ereignis löschen möchten Wenn Sie ein Ereignis ändern, ist dies besonders umständlich und noch komplizierter. Wichtig ist, dass wir die Verknüpfung zwischen JavaScript und DOM-Knoten erhöht haben. Wenn es einen Zirkelverweis gibt, kann dies zu Speicherverlusten führen Nachteile,

Eine Möglichkeit, diesen Nachteil zu lösen, ist die Ereignisdelegierung. Mit dieser Methode können Sie vermeiden, Ereignisse einzeln zu jedem Knoten hinzuzufügen. Sie bindet diese Überwachungsereignisse an die übergeordneten Elemente dieser Knoten. Auf dem übergeordneten Element Diese Überwachungsfunktion ermittelt automatisch, welches untergeordnete Element das Ereignis ausgelöst hat, sodass sie auf das untergeordnete Element zugreifen kann, das das Ereignis ausgelöst hat. Das hier angegebene Beispiel ist ein Beispiel von davidwalsh:

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

<ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

Was wir jetzt erreichen wollen, ist, dass, wenn wir auf jeden li-Knoten klicken, der Inhalt des li-Knotens wie oben beschrieben ausgegeben wird Beim Schreiben können Sie diese Li auswählen, ihnen diese Methoden hinzufügen und sie dann entfernen, wenn sie nicht mehr benötigt werden. Wenn es 100 Li oder 1000 Li gibt, wird dies zu Ihrem Albtraum. Eine bessere Lösung besteht darin, ein Listening-Ereignis hinzuzufügen Die nächste Frage zum übergeordneten Element ist, wie wir feststellen können, auf welches Li geklickt wurde. Wir können das Ziel des aktuellen Ereignisses im Listening-Ereignis beurteilen, um festzustellen, ob es sich um den Knoten handelt, nach dem wir suchen:

// 找到父元素,绑定一个监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
  // e.target是点击的元素
  // 如果它是li元素
  if(e.target && e.target.nodeName == "LI") {
    //
    console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
  }
});

Wenn in ul ein Klickereignis auftritt, wird das Listening-Ereignis ausgeführt, wenn das zugrunde liegende Ereignis ausgelöst wird, da addEventListener standardmäßig ein Bubbling-Ereignis ist. Überprüfen Sie nach dem Auslösen, ob es sich um das Zielelement handelt Ist das gesuchte Element nicht das Zielelement, wird es ignoriert. Dann können wir nicht nur prüfen, ob das Tag des Zielelements das von uns benötigte Zielelement ist, sondern wir können es auch anhand der Attribute oder des Klassennamens erkennen Zielelement, für die Verarbeitung wird die ele .maeches-API verwendet.

document.getElementById("myp").addEventListener("click",function(e) {
  // e.target 就是当前被点击的元素
 if (e.target && e.target.matches("a.classA")) {
  console.log("Anchor element clicked!");
  }
});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue.

jsDetaillierte Schritte zur Entwicklung des MPvue-Frameworks

Laden und Entfernen Sie

Detaillierte Erklärung von js und CSS-Dateischritten

Wie schreibe ich JS

, wenn Sie unregelmäßige Multis durchlaufen müssen -dimensionale Arrays

Das obige ist der detaillierte Inhalt vonEvent-Delegation in Javascript (Bild- und Text-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!