Detaillierte Erläuterung der Verwendung der JS-Ereignisdelegierung

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung der JS-Ereignisdelegierung ausführlich erläutern. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

angezeigt, der die aktuelle Zeit anzeigt, zu der wir auf li klicken Die vom System an uns übermittelten Informationen innerHTML beziehen sich tatsächlich auf das aktuell angeklickte Objekt. Jedes Mal, wenn wir das function(e){}; des aktuell angeklickten Objekts anzeigen, handelt es sich um einen einfachen Ereignisdelegationsfall. e.targetinnerHTMLDie 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:

Vue implementiert die dynamische Aktualisierung der Echarts-Komponente

Verwenden Sie den Selectpicker im Bootstrap, um das Dropdown-Feld zu implementieren

Verwendung von URL, Href, Src in JS

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