Detaillierte Erläuterung der Beispiele für die JS-Ereignisdelegierung

In diesem Artikel werden hauptsächlich die Beispiele für die JS-Ereignisdelegierung ausführlich erläutert. Schauen wir uns zunächst die Ereignisdelegation an: Sie wird auch als Ereignis-Proxy bezeichnet und verwendet das Prinzip des Sprudelns, um Ereignisse zum übergeordneten Element hinzuzufügen Ausführungseffekt.

Zunächst müssen Sie ein Programm wie dieses geschrieben haben. Wenn sich die Maus in jedes Li bewegt, wird die Hintergrundfarbe rot, also haben wir diesen Code geschrieben:

(Der Code, den ich gebe, ist normalerweise der Schlüsselcode, Sie können den HTML-Code selbst schreiben.)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Natürlich gibt es kein Problem, wenn Sie sich den Code so ansehen Fügen Sie jedem Li über eine Schleife Ereignisse hinzu, aber ich möchte darüber nachdenken, ob wir viele Ereignisse hinzufügen müssen, wenn wir viele Li haben. Das ist tatsächlich sehr leistungsintensiv. Dann werden wir uns fragen, ob wir dies erreichen können, indem wir nur ein einziges Ereignis hinzufügen. Natürlich ist es möglich, sonst würde ich nicht darüber reden. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> Das ist die Ereignisdelegation durch das Bubbling-Prinzip. Wir können Ereignisse nur zum übergeordneten oUL hinzufügen, sodass das Einzugsereignis des übergeordneten Elements ausgelöst wird Ich verstehe das Sprudeln nicht, Sie können auf meinen JS-Sprudelartikel verweisen, aber es gibt derzeit auch ein Problem, da meine Anforderung darin besteht, die Farbe des entsprechenden Li zu ändern, nicht die gesamte Liste. Woher weiß ich, welches LI ich habe? Bewegen Sie die Maus hinein? Zu diesem Zeitpunkt wird ein Attribut im universellen Ereignisobjekt angezeigt. Dies ist die Ereignisquelle (unabhängig davon, an welches Element das Ereignis gebunden ist, es bezieht sich auf das Ziel, das das Ereignis tatsächlich auslöst). Rufen Sie den LI ab, an dem sich Ihre aktuelle Maus befindet. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Dies weist jedoch Kompatibilitätsprobleme auf. IE unterscheidet sich vom Standard. Der Standard bezieht sich auf die neueren Versionen von Browsern </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE: window.event .srcElement<br>Standard: Ereignis</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Es muss also kompatibel sein, was auch sehr einfach ist. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Sehen Sie sich den Gesamtcode unten an: </p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

Auf diese Weise wird die gesamte Anforderung erfüllt, und die Leistung wird erheblich verbessert, wenn es viele gibt Listen.

Tatsächlich hat die Ereignisdelegation einen zweiten Vorteil: Neu hinzugefügte Elemente haben auch frühere Ereignisse

Angenommen, wir haben eine andere Anforderung, klicken Sie auf eine Schaltfläche, und Sie können eine weitere erstellen Zu diesem Zeitpunkt besteht die allgemeine Methode darin, dass das neu erstellte Li nicht über die Funktion verfügt, einzuziehen und rot zu werden. Bei Verwendung der Ereignisdelegationsmethode ist das neue Li jedoch ebenfalls vorhanden hat diese Veranstaltung. Das Prinzip ist auch sehr einfach anzuwenden, da das Ereignis zum Vater hinzugefügt wird. Wenn der Vater da ist, ist das Ereignis da. Sie können es selbst testen.

Verwandte Empfehlungen:

Details zu Ereignissen in js Bubbling und Ereigniserfassung und Ereignisdelegation

Vergleichende Analyse von Ereigniserfassung, Sprudeln und Ereignisdelegation

Detaillierte Erläuterung der Javascript-Ereignisdelegation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für die JS-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!