So verwenden Sie den JS-Ereignis-Proxy

Dieses Mal zeige ich Ihnen, wie Sie den JS-Ereignis-Proxy verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des JS-Ereignis-Proxys gelten. 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 Ereignisdelegierung 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 Fall der Ereignisdelegierung. 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 aufgrund der Leistung von Dom-Operationen nehmen zu viele For-Schleifen viele Ereignisse in Anspruch. 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:

Wie Webpack Caching betreibt

So verwenden Sie Bootstrap+WebUploader

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den JS-Ereignis-Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!