Maison >interface Web >js tutoriel >Exemple d'implémentation JS d'ajout d'une fonction d'événement à des éléments ajoutés dynamiquement

Exemple d'implémentation JS d'ajout d'une fonction d'événement à des éléments ajoutés dynamiquement

亚连original: 2018-05-26 17:30:001844parcourir

Cet article présente principalement l'implémentation JS de l'ajout d'événements aux éléments ajoutés dynamiquement et analyse les compétences opérationnelles associées de javascript basées sur la délégation d'événements pour ajouter des événements aux éléments ajoutés dynamiquement

L'exemple de cet article décrit l'implémentation JS de l'ajout de fonctions d'événement aux éléments ajoutés dynamiquement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Nous créons parfois certains éléments via js dans le développement quotidien, mais si vous utilisez la boucle for originale pour ajouter des événements aux nœuds créés, c'est souvent le cas ne fonctionne pas :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
   var htmlFragment=&#39;<li>我是新增的li</li>&#39;;
   var addLi=document.createElement(&#39;li&#39;);
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

Effet de l'opération :

Par exemple, les événements ajoutés à li via la boucle for ne peut pas être lié. Il est défini sur le li nouvellement ajouté. Les raisons détaillées ne seront pas expliquées ici. Alors comment résoudre cela ? En fait, la solution est simple, c'est à dire, pour le résoudre par délégation d'événement, entrez directement le code, le code ci-dessus est simplement modifié :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
   var htmlFragment=&#39;<li>我是新增的li</li>&#39;;
   var addLi=document.createElement(&#39;li&#39;);
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener(&#39;click&#39;,function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

Résultats d'exploitation :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus