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><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> 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-KomponenteVerwenden Sie den Selectpicker im Bootstrap, um das Dropdown-Feld zu implementierenVerwendung von URL, Href, Src in JSDas 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!
