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

时间：2021-05-26

本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大家参考，具体如下：

我们在日常开发中有时会通过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的方式也可以很好的理解

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章