Zusammenfassung der Beispiele für die JS-Ereignisdelegierung

Die Ereignisdelegation wird auch als Ereignis-Proxy bezeichnet. Vereinfacht ausgedrückt bindet sie Ereignisse an das übergeordnete Element und wartet auf sprudelnde Ereignisse von untergeordneten Elementen. Wenn Sie Fragen dazu haben, was Event-Bubbling ist, klicken Sie bitte auf das Ereignis in js, das eine detaillierte Erklärung des Event-Bubbling enthält. Was müssen wir bei der Verwendung der Ereignisdelegation wissen?

1. Bei der Verwendung der Ereignisdelegation müssen wir auch ein Konzept kennen: die Ereignisquelle unter dem Ereignisobjekt

Ereignisquelle: Im Ereignis ist das aktuell betriebene Element die Ereignisquelle. Wenn wir beispielsweise auf die Beschriftung a klicken und ein Onclick-Ereignis auftritt, ist die Ereignisquelle die Beschriftung a. Wenn wir auf li klicken und ein Onclick-Ereignis auftritt, ist die Ereignisquelle li

So erhalten Sie das Ereignisquelle?

Unter IE: window.event.srcElement;

Unter Standard: event.target

Kompatibilitätsverarbeitung: var target = ev.target||ev.srcElement

2. Suchen Sie den Tag-Namen des aktuellen Elements: nodeName (er ist in Großbuchstaben geschrieben und Sie müssen die Methode toLowerCase() verwenden, um ihn in Kleinbuchstaben umzuwandeln)

Nachdem Sie so viel geschrieben haben, was sind die Vorteile der Veranstaltungsdelegation?

1. Es kann die Leistung verbessern

2. Neu hinzugefügte Elemente haben auch frühere Ereignisse

Lassen Sie mich Beispiele verwenden, um Ihnen ein Gefühl zu geben .呗

HTML-Code

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

Der gewünschte Effekt besteht darin, dass sich die Hintergrundfarbe des entsprechenden Li in Rot ändert, wenn sich die Maus in das Li bewegt, und wenn sich die Maus herausbewegt , es ändert sich in die ursprüngliche Farbe

Wenn die allgemeine Schreibmethode so ist

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

Sehen wir uns an, wie die Ereignisdelegierung verwendet wird

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

Oben Bei dieser Methode müssen wir ein Klickereignis an jedes Li binden, und bei der folgenden Methode müssen wir nur ein Klickereignis an das übergeordnete Element binden. Wenn die Anzahl der Li klein ist, ist dies in Ordnung Es ist denkbar, dass die Ereignisdelegation die Leistung erheblich verbessern kann

Beispiel 2.

HTML-Code

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

Wir hoffen, dass beim Klicken auf die Schaltfläche li zu ul hinzugefügt wird, Und jedes Mal, wenn wir die Maus hineinbewegen, ändert sich die Hintergrundfarbe von li, und wenn wir die Maus herausbewegen, ändert sich die Farbe zurück. Wenn wir die übliche Methode verwenden, ändern wir uns Sie müssen ein Einzugs- und Auszugsereignis hinzufügen, wenn Sie es selbst ausprobieren. Wenn wir jedoch die Ereignisdelegierung verwenden, ist dies nicht erforderlich. Schauen Sie sich den folgenden Code an (Ich denke, jeder weiß, wie es geht, deshalb werde ich es nicht mehr schreiben. Im Folgenden werde ich nur schreiben, wie man die Ereignisdelegation verwendet)

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

Nach dem Lesen des oben Gesagten denken Sie, dass die Ereignisdelegation wirklich funktioniert? nützlich? Also nutzen Sie es jetzt!

Verwandte Empfehlungen:

Detaillierte Erläuterung der JS-Ereignisdelegationsinstanz

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