Exemple d'implémentation JS d'ajout d'une fonction d'événement à des éléments ajoutés dynamiquement-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-26 17:30:00

original

1806 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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.