recherche

Maison >interface Web >js tutoriel >JS utilise la délégation d'événements pour ajouter des événements aux éléments

JS utilise la délégation d'événements pour ajouter des événements aux éléments

php中世界最好的语言
php中世界最好的语言original
2018-05-09 10:35:261545parcourir

Cette fois, je vais vous expliquer quelles sont les précautions pour lesquelles JS utilise la délégation d'événements pour ajouter des événements aux éléments, et JS utilise la délégation d'événements pour ajouter des événements aux éléments. Ce qui suit est un cas pratique, prenons. un regard.

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, cela ne fonctionne souvent pas : 

<!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>

Par exemple, les événements ajoutés à li via la boucle for ne peuvent pas être liés au li nouvellement ajouté. Les raisons détaillées ne seront pas expliquées ici. Alors comment résoudre cela ? En fait, la méthode 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>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>

De cette façon, même l'événement li click nouvellement ajouté peut également être déclenché, mais la méthode détaillée de jquery ne sera pas présentée ici. Les principes de solution de js natif et de jquery sont en fait les mêmes. Je crois que tout le monde a compris la méthode native, et la méthode jQuery peut également être bien comprise

Je crois qu'après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de la méthode filter() dans jquery

Description du cas d'utilisation du filtre () méthode en jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel détaillé sur l'implémentation du composant carrousel d'images dans VueArticle suivant：Tutoriel détaillé sur l'implémentation du composant carrousel d'images dans Vue

Articles Liés

Voir plus