zoukankan      html  css  js  c++  java
  • 给新生成的节点(动态生成节点)绑定事件方法总结

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

  • 相关阅读:
    [不知道哪来的题] Subsequence
    [不知道哪来的题] 变量(variable)
    [不知道哪来的题] 串(string)
    LOJ#500. 「LibreOJ β Round」ZQC 的拼图
    Codeforces855C Helga Hufflepuff's Cup
    Codeforces895C Square Subsets
    Codeforces757D Felicity's Big Secret Revealed
    bzoj3694 最短路
    maven安装时报错的问题
    java static关键字
  • 原文地址:https://www.cnblogs.com/wuyuchao/p/8309269.html
Copyright © 2011-2022 走看看