JS实现为动态添加的元素增加事件功能示例【基于事件委托】
程序员文章站
2022-03-26 15:05:11
本文实例讲述了js实现为动态添加的元素增加事件功能。分享给大家供大家参考，具体如下：
我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点...
本文实例讲述了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事件与功能说明大全：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 用HTML编写阿里云