Teilen von nativem JS- und jQuery-Beispielcode zur Ereignisdelegierung in JavaScript

Der folgende Editor zeigt Ihnen ein Beispiel für die Delegation von JavaScript-Ereignissen (mit nativem JS- und jQuery-Code). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Das Prinzip der Ereignisdelegierung basiert auf der Ereignissprudelung. Sie können bestimmen, welches untergeordnete Element das Ereignis ausgelöst hat, indem Sie das Ereignis an das übergeordnete Element delegieren, um eine Reihe von Vorgängen auszuführen.

Vorteile der Verwendung der Ereignisdelegierung

1. Es ist nicht erforderlich, die untergeordneten Elemente einzeln durchzugehen , sie können basierend auf Ereignissen ausgelöst werden. Die entsprechende Operation wird am Objekt ausgeführt

Die Dom-Struktur ist wie folgt:

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

Wenn auf li geklickt wird. Drucken Sie den Wert von li aus.

Bevor wir die Ereignisdelegation lernen, werden wir alle li durchlaufen und ihnen ein Klickereignis hinzufügen, wie zum Beispiel dieses:

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener(&#39;click&#39;, function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

Nach der Delegierung von Lernereignissen lautet der native js-Code wie folgt:

var oUl = document.getElementById('oUl');
oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

Der jQuery-Code lautet wie folgt:

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

Im Gegensatz dazu muss der Ereignisdelegierte nur das übergeordnete Element abrufen und muss das Li nicht durchlaufen, was die Effizienz erheblich verbessert.

2. Nach dem Delegieren von Ereignissen an das übergeordnete Element müssen dynamisch erstellte (gelöschte) untergeordnete Elemente Ereignisse nicht erneut binden (entbinden), wodurch synchrone Aktualisierungen von Elementen und Ereignissen erreicht werden

In der Vergangenheit hatten mit js dynamisch erstellte untergeordnete Elemente keine Ereignisse und Ereignisse mussten neu an sie gebunden werden. Die Verwendung der Ereignisdelegation erfordert jedoch nicht so viel Aufwand Ereignisse können weiterhin eine Ereignisüberwachung implementieren.

Natürlich hat die Ereignisbindung auch Nachteile, da sie auf dem Ereignis-Bubbling basiert. Wenn das Bubbling nicht unterstützt wird, kann die Ereignisbindung nicht implementiert werden, aber ich denke, die Wahrscheinlichkeit dafür ist immer noch gering. Es gibt auch eine Fehleinschätzung von Ereignissen. Beispielsweise besteht die Funktion von Schaltfläche1 und Schaltfläche2 darin, den Wert anzuzeigen, wenn darauf geklickt wird, während die Funktion von Schaltfläche3 darin besteht, die Farbe der Seite zu ändern Die Ereignisse dieser drei Schaltflächen unterscheiden sich, wenn Sie auf klicken. Wenn Ereignisse an ihr gemeinsames übergeordnetes Element delegiert werden, kommt es zu einer Fehleinschätzung des Ereignisses.

Ich denke also, dass eine Ereignisdelegierung auftritt, wenn die Ereignisfunktionen einer Untersammlung gleich sind. Wenn sie nicht gleich sind, verwenden Sie keine Ereignisdelegation, um eine Selbstzerstörung zu vermeiden.

In der tatsächlichen Entwicklung wird die Beherrschung der Ereignisbindung die Standardisierung und Effizienz des Codes verbessern. Im Allgemeinen überwiegen die Vorteile die Nachteile.

Das obige ist der detaillierte Inhalt vonTeilen von nativem JS- und jQuery-Beispielcode zur Ereignisdelegierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!