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>

 

你可能感兴趣的:(clone)