Heim > Artikel > Web-Frontend > JS verwendet die Ereignisdelegierung, um Ereignisse zu Elementen hinzuzufügen
JS verwendet die Ereignisdelegierung, um Ereignisse zu Elementen hinzuzufügen
- php中世界最好的语言Original
- 2018-05-09 10:35:261450Durchsuche
Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, bei denen JS die Ereignisdelegierung verwendet, um Ereignisse zu Elementen hinzuzufügen, und JS die Ereignisdelegation verwendet, um Ereignisse zu Elementen hinzuzufügen. Nehmen wir das Folgende als einen praktischen Fall ein Blick.
Manchmal erstellen wir in der täglichen Entwicklung einige Elemente über js, aber wenn Sie die ursprüngliche for-Schleife verwenden, um Ereignisse zu den erstellten Knoten hinzuzufügen, funktioniert es oft nicht:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js动态添加事件</title>
</head>
<body>
<ul id="out-ul">
<li class="out-li">123</li>
<li class="out-li">123</li>
<li class="out-li">123</li>
</ul>
<button id="btn">添加</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
var htmlFragment='<li>我是新增的li</li>';
var addLi=document.createElement('li');
addLi.innerHTML=htmlFragment;
outUl.appendChild(addLi);
},false);
var outUl=document.getElementById('out-ul')
var outLi=outUl.getElementsByClassName('out-li');
for(var i=0;i<outLi.length;i++){
outLi[i].onclick=function(){
alert(1);
}
}
</script>
</body>
</html>
Zum Beispiel können die über die for-Schleife zu li hinzugefügten Ereignisse nicht an das neu hinzugefügte li gebunden werden. Die detaillierten Gründe werden hier nicht erläutert. Wie kann man das lösen? Tatsächlich ist die Methode einfach, das heißt, man löst es durch Ereignisdelegation und gibt den obigen Code einfach ein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js动态添加事件</title>
</head>
<body>
<ul id="out-ul">
<li class="out-li">123</li>
<li class="out-li">123</li>
<li class="out-li">123</li>
</ul>
<button id="btn">添加</button>
<script>
var outUl=document.getElementById('out-ul')
var outLi=outUl.getElementsByClassName('out-li');
document.getElementById('btn').addEventListener('click',function(){
var htmlFragment='<li>我是新增的li</li>';
var addLi=document.createElement('li');
addLi.innerHTML=htmlFragment;
outUl.appendChild(addLi);
},false);
outUl.addEventListener('click',function(e){
e=e || window.event;//兼容ie
alert(e.target.innerHTML);
}, false);
</script>
</body>
</html>
Auf diese Weise kann auch das neue hinzugefügte Li-Click-Ereignis ausgelöst werden, die detaillierte Methode von jquery wird hier jedoch nicht vorgestellt. Die Lösungsprinzipien von nativem js und jquery sind tatsächlich dieselben. Ich glaube, dass jeder die native Methode verstanden hat und die JQuery-Methode auch gut verstanden werden kann.
Ich glaube, dass Sie die Methode nach dem Lesen des Falls in diesem Artikel beherrschen. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung der filter()-Methode in jquery
Anwendungsfallbeschreibung des Filters ()-Methode in jquery
Das obige ist der detaillierte Inhalt vonJS verwendet die Ereignisdelegierung, um Ereignisse zu Elementen hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!