JS-Ereignisblasen und Ereigniserfassung (grafisches Tutorial, einfache Gewalt)

Dieser Artikel stellt hauptsächlich das Ereignis-Bubbling und die Ereigniserfassung von JS vor. Er beschreibt den Unterschied zwischen den beiden im Detail anhand von Codebeispielen.

Hören Sie sich in der Schule die Erklärung des Lehrers an Die Mechanismen zum Bubbling und Erfassen von Ereignissen sind die gleichen wie bei Tingtianshu. Ich erinnere mich nur vage daran, dass der IE das Bubbling von Ereignissen verwendet und andere Browser das Erfassen von Ereignissen. Damals betrachtete ich es als ein Kompatibilitätsproblem mit dem IE-Browser und habe mich daher nicht näher damit befasst (Browser unter IE8 wurden grundsätzlich vom Markt genommen). Obwohl ich bei meiner Arbeit oft auf ein Problem dieser Art gestoßen bin, habe ich es nie eingehend untersucht. Ich habe immer nur ein teilweises Verständnis davon und verlasse mich auf Vermutungen (wählen Sie A, wenn es nicht funktioniert, wählen Sie einfach B). Ich habe heute, als ich nichts zu tun hatte, eine Demo erstellt und dieses Problem endlich vollständig verstanden.

Zuerst die Schlussfolgerung: Es handelt sich um Begriffe, die zur Beschreibung ereignisauslösender Timing-Probleme verwendet werden. Die Ereigniserfassung bezieht sich auf den Prozess vom Dokument bis zum Knoten, der das Ereignis auslöst, dh von oben nach unten, um das Ereignis auszulösen. Im Gegensatz dazu löst das Event-Bubbling Ereignisse von unten nach oben aus. Der dritte Parameter der gebundenen Ereignismethode besteht darin, zu steuern, ob die Ereignisauslösesequenz eine Ereigniserfassung ist. wahr, Ereigniserfassung; falsch, Ereignissprudeln. Der Standardwert ist „false“, was bedeutet, dass das Ereignis sprudelt. Die e.stopPropagation von Jquery verhindert das Sprudeln, was für mich bedeutet, dass die Ereignisse meines Vaters und meiner Vorfahren nicht ausgelöst werden.

Dies ist die HTML-Struktur

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

Jetzt binden wir Ereignisse an sie

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+this.id)
  })

Ergebnis:

Untergeordnetes Ereignis wird ausgelöst, untergeordnetes Element
übergeordnetes Ereignis Ereignis wird ausgelöst, Elternteil

Fazit: zuerst Kind, dann Elternteil. Ereignisse werden der Reihe nach von innen nach außen ausgelöst, was als Event-Bubbling bezeichnet wird.

Ändern Sie nun den Wert des dritten Parameters in true

　　 document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+e.target.id)
  },true)

Ergebnis:

übergeordnetes Ereignis wird ausgelöst, übergeordnetes Element
untergeordnetes Ereignis wird ausgelöst, untergeordnetes Element

Fazit: Erst die Eltern, dann das Kind. Die Reihenfolge der Ereignisauslösung wird von außen nach innen geändert, was der Ereigniserfassung entspricht.

Der letzte Fall der Verwendung von Event-Bubbling ist etwas, das ich oft verwende.

　　<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

Die Anforderungen sind wie folgt: Der Hintergrund des entsprechenden Li wird grau, wenn die Maus darauf platziert wird.

Ereignis-Bubbling nutzen, um Folgendes zu erreichen:

　　$("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

Manche Leute sagen vielleicht, dass wir Ereignisse direkt mit allen li verknüpfen können. Das ist überhaupt nicht problematisch, solange...

　　　$("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

Ja, das ist auch in Ordnung. Und was die Einfachheit des Codes betrifft, sind die beiden ähnlich. Bei ersterem entfällt jedoch die Notwendigkeit, alle Li-Knoten zu durchlaufen, sodass die Leistung definitiv besser ist.
Auch wenn wir nach Abschluss des Bindungsereignisses einige Elemente dynamisch auf die Seite laden ...

$("<li>item7</li>").appendTo("ul");
Zu diesem Zeitpunkt die zweite Lösung, aufgrund des Bindungsereignisses Zu diesem Zeitpunkt existierte item7 noch nicht, daher müssen wir der Wirkung halber erneut ein Ereignis daran binden. Und weil es sich bei der Verwendung des Sprudelschemas um einen Vorfall handelt, der mit ul verbunden ist...
Die Entscheidung wird getroffen!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie AngularJS, um den Abschluss des NG-Repeat-Renderings zu überwachen

Verwenden Sie p5. jsBeispielcode für die Erstellung von Feuerwerks-Spezialeffekten_Javascript-Fähigkeiten

JS+PHP zum dynamischen Hinzufügen von Methoden zu Klassen

Das obige ist der detaillierte Inhalt vonJS-Ereignisblasen und Ereigniserfassung (grafisches Tutorial, einfache Gewalt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!