JS实现为动态添加的元素增加事件功能示例【基于事件委托】

动态元素事件绑定问题概述

本文介绍利用JavaScript实现为动态添加的元素绑定事件的具体方法，供读者参考学习。

在实际开发中，常需通过JS动态生成节点。若采用传统的for循环遍历并逐个绑定事件的方式，通常无法生效。

<!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('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循环为现有li元素绑定的事件，无法自动应用于后续新增的li节点。其深层原因此处略过，解决方案较为直接，即采用事件委托机制。对前述代码进行简单改造即可实现，具体代码如下。

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

改造后的运行效果如下。

此时，新增的li元素点击事件也能正常触发。此处暂不展开jQuery的具体实现，原生JS与jQuery在解决此问题上的核心原理一致。理解原生实现后，jQuery的使用方式便易于掌握。

补充说明：关于JavaScript事件的详细说明，可参考本站提供的javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

感兴趣读者还可查阅本站相关专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。

希望本文所述内容对JavaScript程序设计有所帮助。