php 动态添加元素,JS实现为动态添加的元素增加事件功能示例

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

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

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

www.jb51.net js动态添加事件

• 123
• 123
• 123

添加

document.getElementById('btn').addEventListener('click',function(){

var htmlFragment='

我是新增的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[i].οnclick=function(){

alert(1);

}

}

运行效果：

比如这样，通过for循环给li添加的事件无法绑定到新增的li上边，详细的原因这里不做解释。那么这个如何解决呢，其实办法也简单，就是通过事件委托的方式去解决，直接上代码，上面的代码简单改造：

www.jb51.net js动态添加事件

• 123
• 123
• 123

添加

var outUl=document.getElementById('out-ul')

var outLi=outUl.getElementsByClassName('out-li');

document.getElementById('btn').addEventListener('click',function(){

var htmlFragment='

我是新增的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);

运行效果：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：