这次给大家带来JS用事件委托给元素增加事件,JS用事件委托给元素增加事件的注意事项有哪些,下面就是实战案例,一起来看一下。
我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通:
<!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循环给li添加的事件无法绑定到新增的li上边,详细的原因这里不做解释。那么这个如何解决呢,其实办法也简单,就是通过事件委托的方式去解决,直接上代码,上面的代码简单改造:
<!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>
这样一来,即便是新增的li点击事件也可以被触发了,不过在这里jquery的详细方式就不做介绍了,原生js跟jquery的解决原理其实是一样的。相信大家把原生的理解了,jquery的方式也可以很好的理解
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是JS用事件委托给元素增加事件的详细内容。更多信息请关注PHP中文网其他相关文章!