专栏首页吴裕超给新生成的节点(动态生成节点)绑定事件方法总结

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

第一种 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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 认识createDocumentFragment

    今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

    吴裕超
  • document.compatMode属性介绍

    之前不了解这个属性,今天总结一下,以后可能会用到。 对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今...

    吴裕超
  • 一次静态页面配置化开发

    在日常项目开发中,我们可能会遇到一些项目,它们的文案可能会不定期改变,多个页面有相似之处,但是相同中又有不同,比如有的直播活动,策略逻辑没变,改了奖品、背景图和...

    吴裕超
  • WinServer离线迁移到腾讯云

    在桌面输入快捷键win+r打开运行窗口,然后输入 diskmgmt.msc,按 Enter,打开 “磁盘管理”。

    赵智勇
  • 链接在微信内置浏览器自动跳转到其它浏览器的方法

    此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的。

    新阳网络CTO
  • 微信内置浏览器自动跳转其它浏览器

    Erwin
  • GoCN每日新闻(2019-09-23)

    1. 查看 Go 的代码优化过程 http://xargin.com/go-compiler-opt

    landv
  • JavaScript 自定义html元素鼠标右键菜单

    在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值

    授客
  • MyBatis配置动态SQL语句

    在 MyBatis 的 SQL映射文件中,有时候需要根据一些查询条件,来选择不同的SQL语句,如果每一个场景都重写SQL,很显然效率没有很高,而 MyBatis...

    BWH_Steven
  • 看我如何利用开发人员所犯的小错误来盗取各种tokens

    实际上,在日常的开发过程中,开发人员很有可能会犯各种各样貌似“无伤大雅”的小错误,单独一个这样的小错误可能并不能搞什么事情,但如果将这些错误串起来形成一个漏洞链...

    FB客服

扫码关注云+社区

领取腾讯云代金券