给新生成的节点(动态生成节点)绑定事件方法总结

Posted wuyuchao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了给新生成的节点(动态生成节点)绑定事件方法总结相关的知识,希望对你有一定的参考价值。

第一种 jquery写法

$(‘.father‘).on(‘click‘,‘,child‘,function(){})

$(document).on(‘click‘,‘,child‘,function(){})

第二种 js原生写法

document.querySelector(‘body‘).addEventListener(‘click‘,function (e) {
 if(e.target.classList.contains(‘.child‘)){
    //具体操作
}
})
document.querySelector(‘.father‘).addEventListener(‘click‘,function (e) {
 if(e.target.classList.contains(‘.child‘)){
    //具体操作
}
})
//可以直接取id,father是就是id
father.addEventListener(‘click‘,function (e) {
 if(e.target.id == ‘child‘ ){
    //具体操作
}
})
<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li>
</ul>
<script>
var list = document.getElementById("list");
document.addEventListener("click",function(event){
    var target = event.target;
    if(target.nodeName == "LI"){
        alert(target.innerhtml);
    }
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>

 

第三种 定时器写法

var id = setInterval(function () {
console.log(‘定时器循环事件绑定‘)
},1000);

但是有些特殊情况会有bug,对于动态添加的这些事件是需要解绑的,具体解绑方法请参考原文https://juejin.im/post/5a1a350d51882560e3565665

还有一篇介绍事件绑定、事件委托、事件监听的很好的文章,再此推荐一下http://blog.xieliqun.com/2016/08/12/event-delegate/

 

以上是关于给新生成的节点(动态生成节点)绑定事件方法总结的主要内容,如果未能解决你的问题,请参考以下文章

时间绑定和事件监听!

怎样给jQuery动态附加新的元素

for for in 给已有的li绑定click事件生成新的li也有click事件

jquery 动态添加节点怎么绑定事件

append()方法生成的元素绑定的事件失效解决办法

随笔一个dom节点绑定事件