suchen

Heim >Web-Frontend >js-Tutorial >JS verwendet die Ereignisdelegierung, um Ereignisse zu Elementen hinzuzufügen

JS verwendet die Ereignisdelegierung, um Ereignisse zu Elementen hinzuzufügen

php中世界最好的语言
php中世界最好的语言Original
2018-05-09 10:35:261546Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliches Tutorial zur Implementierung der Bildkarussellkomponente in VueNächster Artikel：Ausführliches Tutorial zur Implementierung der Bildkarussellkomponente in Vue

In Verbindung stehende Artikel

Mehr sehen