趣味测试小程序_JS完成为动态添加的元素添加工

JS实现为动态添加的元素增加事件功能示例【基于事件委托】       这篇文章主要介绍了JS实现为动态添加的元素增加事件功能,结合实例形式分析了javascript基于事件委托实现针对动态添加的元素增加事件的相关操作技巧,需要的朋友可以参考下

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

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title  js动态添加事件 /title 
 /head 
 body 
 ul id="out-ul" 
 li 123 /li 
 li 123 /li 
 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]. unction(){
 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 123 /li 
 li 123 /li 
 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的方式也可以很好的理解

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》

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




扫描二维码分享到微信