JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018-03-21 12:13
941 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- js为动态添加的元素增加事件(事件委托)
- JS实现为动态创建的元素添加事件操作示例
- js为动态添加的元素增加事件(事件委托)
- js 动态给元素添加、移除事件的实现方法
- JS实现动态给标签控件添加事件的方法示例
- JS基于onclick事件实现单个按钮的编辑与保存功能示例
- JS实现动态添加DOM节点和事件的方法示例
- 事件委托:给多个元素和动态添加的元素绑定js事件,
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JQuery实现表格动态增加行并对新行添加事件
- ready和onload比较;可以在下面的script里面调用先前script;动态为元素添加事件;浮动广告;js添加删除tr
- JQuery实现表格动态增加行并对新行添加事件
- 通过原生JS实现为元素添加事件
- js 动态增加file实现多文件上传功能并显示路径
- JS_增加事件,移除事件,动态元素的增删事件
- js实现网页收藏功能,动态添加删除网址
- 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
- JS自定义功能函数实现动态添加网址参数修改网址参数值