• cloneNode小结


         js原生API中有个cloneNode,还有一个可选的参数,

                true代表复制子节点,包括任何包裹在标签之间的东西,当然包括文本节点,也就是标签之间有什么,它就会不假思索的全部都克隆一份。

        false代表只复制节点本身,节点之间的任何东西都不用复制。

        有时候,这个参数对于某些情况true false是相等的,比如没有任何子节点的复制,eg<div></div>

        这不是本文所阐述的,本文阐述的是cloneNode在各种使用情况下对于是否复制事件表现的差异性:

    例子页面:

    <!doctype html>
    <html>
    <body>
    <div id="myDiv" >
        this is my div
    </div>
    </body>

    添加事件

    eg1.

    <div id="myDiv" onclick="sayHello();">
        this is my div
    </div>

    <script>

        var elem = document.getElementById("myDiv");
        
        //1.倘若放在dom节点属性onclick方法上,复制节点会复制出事件,新生成的dom也会附带上click事件
        function sayHello(){
            alert("say hello");
        }
       
        document.body.appendChild(elem.cloneNode(true));
        
    </script>

    eg2.

    <div id="myDiv" >
        this is my div
    </div>

    <script>

        var elem = document.getElementById("myDiv");
        
        //2.直接注册节点的click事件,cloneNode不会复制出事件
        function sayHello(){
            alert("say hello");
        }
        elem.onclick = sayHello();
        document.body.appendChild(elem.cloneNode(true));
        
    </script>

    eg3.

    <div id="myDiv" >
        this is my div
    </div>

    <script>
       function addEvent(elem, type, fn){
            //cloneNode的时候,由此方法添加事件,新生产的节点会复制出事件
            if(elem.attachEvent){
                elem.attachEvent("on" + type, fn);
            //cloneNode的时候,由此此方法添加事件,新生产的节点不会复制出事件    
            }else if(elem.addEventListener){
                elem.addEventListener(type, fn, false);
            }
        }
        var elem = document.getElementById("myDiv");

        function sayHello(){
            alert("say hello");
        }
        addEvent(elem, "click", sayHello);
        document.body.appendChild(elem.cloneNode(true));
        
    </script>

  • 相关阅读:
    SPOJ 10628 求树上的某条路径上第k小的点
    zoj 2112 动态区间求第k大
    SPOJ QTREE 树链剖分
    FZU 2082 过路费
    bzoj 1036 Tree Count
    POJ 3237
    C
    G
    E
    B. Split a Number(字符串加法)
  • 原文地址:https://www.cnblogs.com/zuiaitianxibi/p/3395548.html
Copyright © 2020-2023  润新知