Eingehende Analyse des Javascript-Ereignis-Proxys_Grundkenntnisse

Ich hatte schon lange das Gefühl, dass es keinen Unterschied zwischen dem Eintreten eines Ereignisses und dem Eintreffen des Ereignisses gibt.

Vor kurzem habe ich noch einmal nachgeschaut und festgestellt, dass der Unterschied wirklich nicht so groß ist! Mal sehen, wie Sie es verstehen.

Um zu verstehen, was ein Event-Agent ist, müssen Sie zunächst verstehen, was ein Agent ist.

Aus geschäftlicher Sicht bedeutet Agent zu sein: Ich habe die Waren, Sie haben die Waren nicht, aber ich habe weder die Zeit noch die Energie, sie alle zu verkaufen, und Sie haben so viel Freizeit, dass Sie habe nur Zeit. Deshalb vertraue ich Ihnen an, mir beim Kauf zu helfen, und dann gebe ich Ihnen eine Provision. Bei diesem Vorgang haben Sie tatsächlich die Ware.

OK, wie verstehen Sie die Bedeutung des Begriffs Event-Agent wörtlich? Mehr dazu später.

1 Schauen wir uns zunächst ein reales Beispiel für die Bindung von Onclik-Events für Anfänger an

Wenn ich meinem vorherigen Verhalten folgen würde, wie würde ich jedem li-Tag onlick hinzufügen? Unsinn, wenn ich es wäre, wäre es definitiv einfach und grob.
Machen Sie eine Schleife durch jedes Li und binden Sie sie dann alle zusammen.

Mein Code sollte also so aussehen:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  　　aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

Es scheint, als wäre alles in Ordnung. Obwohl es in einigen Artikeln heißt, dass dies Leistung verbraucht, ist mein Computer in Ordnung und Ihre Leistung ist mir egal, daher kann ich das nicht allzu ernst nehmen.

2 Eines Tages stellte ich plötzlich fest, dass das neue li, das über js hinzugefügt wurde, nicht an onlcik gebunden war

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

Wenn ich dann auf Maomaoliang klicke, wird mein Onlick nicht gebunden. Warum ist das so?
Oh, es stellte sich heraus, dass mein ursprüngliches li und das später generierte li nicht gleichzeitig stattfanden. Bevor das neue li-Element erstellt wurde, wurden Ereignisse zum vorhandenen li hinzugefügt. Okay, so nervig.

Drei Wie kann man es brechen?

Dann habe ich einige Artikel gelesen und herausgefunden, dass es einen sogenannten Event-Proxy gibt, der verwendet werden kann. Ich werde es versuchen! Also habe ich einen Teil des Codes umgeschrieben, etwa so:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

Dadurch löste ein Klick auf das neue Li auch die Fn-Funktion aus. Nun, wie könnte ich als von Neugier getriebener Körper nicht um weitere Erklärungen bitten? Man muss noch praktischer vorgehen und das Geheimnis dahinter verstehen.

Also habe ich mir die Informationen des Veranstaltungsagenten angesehen.

Zunächst müssen Sie wissen, was Event-Bubbling ist: Wenn ein Ereignis auf einem Element ausgelöst wird, beispielsweise wenn die Maus auf eine Schaltfläche klickt, wird dasselbe Ereignis in allen Vorgängerelementen dieses Elements ausgelöst. Dieser Vorgang wird als Event-Bubbling bezeichnet.

Dann zurück zur vorherigen Frage „Wie ist die Bedeutung des Begriffs „Event-Agent“ wörtlich zu verstehen“: Wer hat das Event vermittelt? Oder wen repräsentiert die Veranstaltung?
Am Beispiel dieses Artikels habe ich mir den geänderten Code angesehen und das Onlick-Ereignis an das ul-Tag anstelle des li-Tags gebunden. Wenn ich also auf ein beliebiges Li-Tag klicke (unabhängig davon, ob es dynamisch generiert wurde oder bereits vorhanden ist), ist dieses Ereignis wie eine Blase, die immer wieder auftaucht. Unter normalen Umständen ist ul auch an onclick gebunden, und body ist ebenfalls an onclick gebunden, was bedeutet, dass es zum obersten Element sprudelt. Aber ich habe mich hier an ul gebunden, sodass ul zu diesem Zeitpunkt die Blase abfängt, das Ereignis nicht mehr steigt und das Body-Tag nicht erreicht werden kann.

Dann ist var target = ev.target || ev.srcElement; dieser Satz ist gleichbedeutend damit, mir zu sagen, wen ich angeklickt habe und wer das Ziel ist. Wenn dieses Ziel zufällig das li-Tag ist, wenn (target.nodeName.toLowerCase() == 'li'), dann führen Sie die fn-Funktion aus.

Endlich habe ich stolz diese Frage beantwortet: Der Tisch repräsentiert das Onlick-Event!

4 Erinnern Sie sich an die Schritte des Ereignis-Proxys

Bindungsereignis des übergeordneten Elements
Das übergeordnete Element weiß, wer das eigentliche Ziel des Ereignisses ist
Wir müssen das Ziel beurteilen, das wir benötigen, eine Rückruffunktion wird ausgeführt (also müssen wir lernen, wie man Selektoren verwendet)

5 Abschließende Zusammenfassung, zwei große Vorteile einer Eventagentur

Leistung wurde versehentlich optimiert
Dynamisch hinzugefügte Elemente können auch an Ereignisse
gebunden werden

Sechs Dinge, die es zu beachten gilt:

Das Obige gilt für die native JS-Ereignisbindung, wenn Sie JQuery verwenden. Und den Code wie folgt geändert:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

Auf diese Weise kann das neu hinzugefügte li-Tag auch an das Klicken gebunden werden. Ist es nicht sehr praktisch und einfach, js zu lernen?

Haha, es ist normal, so zu denken, aber nachdem ich einige Dinge gemacht hatte, stellte ich fest, dass JQuery wirklich nicht ausreicht! Aber im Grunde reicht es!

Obwohl die Meister sagen, dass Sie js lernen müssen, denke ich immer noch, dass Sie zuerst jquery und später js lernen können, und der Effekt wird gut sein.