Home > Article > Web Front-end > JS uses event delegation to add events to elements

JS uses event delegation to add events to elements

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

This time I will bring you JS's use of event delegation to add events to elements, and JS's use of event delegation to elements to add events. What are the precautions? Here is a practical case, let's take a look.

We sometimes create some elements through js in daily development, but if we use the original for loop to add events to the created nodes, it often does not work:

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

For example, the events added to li through the for loop cannot be bound to the newly added li. The detailed reasons will not be explained here. So how to solve this? In fact, the method is simple, that is, to solve it through event delegation, and directly enter the code. The above code is simply modified:

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

In this way, even the new The added li click event can also be triggered, but the detailed method of jquery will not be introduced here. The solution principles of native js and jquery are actually the same. I believe that everyone has understood the native method, and the jquery method can also be well understood

I believe that after reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

JS uses event delegation to add events to elements

Related articles