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

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<