cloneNode小结

时间 2019-11-21

标签 clonenode 小结繁體版

原文原文链接

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

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

　　　　false表明只复制节点自己，节点之间的任何东西都不用复制。dom

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

这不是本文所阐述的，本文阐述的是cloneNode在各类使用状况下对因而否复制事件表现的差别性：htm

例子页面：事件

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

添加事件get

eg1.io

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

<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>

相关文章

相关标签/搜索

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<