这次给大家带来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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js事件委托使用详解
vue.js中computed使用详解
以上就是js给动态添加元素增加事件（附代码）的详细内容。