Detaillierte Erläuterung der Verwendung der Ereignisdelegierung in JS

Dieses Mal werde ich Ihnen die Verwendung der Ereignisdelegation in JS ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Ereignisdelegation in JS?

Ereignisdelegation (auch Ereignis-Proxy genannt). Um die Ereignisdelegation zu verstehen, müssen wir zunächst den Mechanismus der Ereignissprudelung verstehen . klar. Nehmen Sie ein Beispiel für das Sprudeln von Ereignissen:

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

Wenn wir in diesem Code auf li klicken, wird das Klickereignis von li ausgelöst, aber zu diesem Zeitpunkt wird auch das Klickereignis von ul ausgelöst Das ist das Sprudeln von Ereignisse. Nachdem wir dies verstanden haben, können wir über die Ereignisdelegation sprechen. Da Ereignisse aus dem übergeordneten Element (ul) des untergeordneten Elements (li) hervorgehen können, können wir ein Klickereignis zu ul selbst hinzufügen und alle li-Ereignisse kombinieren an unsere Eltern (ul). Vielleicht verstehen einige Freunde hier immer noch nicht die Verwendung dieser Ereignisdelegation zur Veranschaulichung:

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托，循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

Wir sind oben. Der Code delegiert das Ereignis an ul , und fügt nur Klickereignisse zu ul hinzu. Wenn Sie das entsprechende li im Browser ausführen, wird der e-Parameter in diesem innerHTML angezeigt, der die aktuelle Zeit anzeigt, zu der wir auf li klicken Die vom System an uns übermittelten Informationen function(e){}; beziehen sich tatsächlich auf das aktuell angeklickte Objekt. Jedes Mal, wenn wir das e.target des aktuell angeklickten Objekts anzeigen, handelt es sich um einen einfachen Ereignisdelegationsfall. innerHTML

Die Ereignisdelegierung ist für uns von großer Bedeutung, um den Code zu optimieren. Wir alle wissen, dass häufige DOM-Operationen sehr leistungsintensiv sind Obiger Code Dazu müssen Sie eine for-Schleife verwenden und für jedes Li ein Klickereignis schreiben. Auf diese Weise gibt es mehr Dom-Operationen, ganz zu schweigen von den Auswirkungen Allein bei der Leistung von Dom-Operationen beanspruchen sie viele Ereignisse, wenn es in li zu viele for-Schleifen gibt. Wenn Sie die Ereignisdelegierung verwenden, können Sie den Leistungsverbrauch von for-Schleifen und den Leistungsverbrauch zahlreicher DOM-Operationen vermeiden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von WebUploader in der Fuzzy-Box

Detaillierte Erläuterung der berechneten Verwendung Fälle in Vue.js

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