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

前端之家收集整理的这篇文章主要介绍了JS实现为动态添加的元素增加事件功能示例【基于事件委托】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通:

<Meta charset="UTF-8"> www.jb51.cc js动态<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>事件
@H_404_15@ document.getElementById('btn').addEventListener('click',function(){ var htmlFragment='
  • 我是新增的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

    运行效果

    比如这样,通过for循环给li添加的事件无法绑定到新增的li上边,详细的原因这里不做解释。那么这个如何解决呢,其实办法也简单,就是通过事件委托的方式去解决,直接上代码,上面的代码简单改造:

    <Meta charset="UTF-8"> www.jb51.cc js动态<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>事件
    @H_404_15@ var outUl=document.getElementById('out-ul') var outLi=outUl.getElementsByClassName('out-li'); document.getElementById('btn').addEventListener('click',false); outUl.addEventListener('click',function(e){ e=e || window.event;//兼容ie alert(e.target.innerHTML); },false);

    运行效果

    这样一来,即便是新增的li点击事件也可以被触发了,不过在这里jquery的详细方式就不做介绍了,原生js跟jquery的解决原理其实是一样的。相信大家把原生的理解了,jquery的方式也可以很好的理解

    PS:

    关于javascript事件说明可参考本站javascript事件与功能说明大全:

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《错误与调试技巧总结》

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

    猜你在找的JavaScript相关文章