这次给大家带来如何操作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>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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
实战项目中如何使用jquery filter()
nodejs+server.js创建 web 服务器
以上就是如何操作js给动态元素增加事件的详细内容。