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>

cloneNode小结的更多相关文章

  1. Javascript基础篇小结

    转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器 ...

  2. 3月web前端面试小结

    说一下box-sizing的应用场景 box-sizing的属性值分为两个,border-box和content-box,其中, border-box:width=content+padding+bo ...

  3. 从零开始编写自己的C#框架(26)——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  4. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  5. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  6. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  7. iOS 之UITextFiled/UITextView小结

    一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...

  8. K近邻法(KNN)原理小结

    K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...

  9. scikit-learn随机森林调参小结

    在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...

随机推荐

  1. Qt 圆角矩形+鼠标左键拖动窗口

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> namespace Ui { class MainWind ...

  2. QF——iOS代理模式

    iOS的代理模式: A要完成某个功能,它可以自己完成,但有时出于一些原因,不方便自己完成.这时A可以委托B来帮其完成此功能,即由B代理完成.但是这个功能不是让B随随便便任其完成.此时,会有一个协议文件 ...

  3. 【grunt整合版】学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  4. MySQL远程(IP)连接报错:Host 'IP地址' is not allowed to connect to this MySQL server

    ERROR 1130: Host ’192.168.1.3′ is not allowed to connect to this MySQL server这是告诉你没有权限连接指定IP的主机,下面我们 ...

  5. VI 配置文件(略全)

    配置 ~/.vimrc文件. root则放到/etc/vimrc 具体详见代码 "====================================================== ...

  6. IE WebDriver 因保护模式无法启动的解决 (转载)

    现在Win7 已经应用很多了,即使是最原始的Win7 也是IE8,最新的patch后,都升到了IE11 Win7下预装高版本IE的情况下,启动IE WebDriver可能会出现: org.openqa ...

  7. Cortex-M3学习日志(一)-- GPIO实验

    因为项目所需,所以不得不开始研究M3,我用的是NXP公司的LPC1768这个芯片,它是具有三级流水线的哈佛结构,带独立的本地指令和数据总线以及用于外设的稍微低性能的第三条总线,还包含一个支持随机跳转的 ...

  8. 在windows下进行linux开发:利用Vagrant+virtualbox(ShowDoc与mp3dish的作者)

    1,介绍Vagrant 我们做web开发的时候经常要安装各种本地测试环境,比如apache,php,mysql,redis等等.出于个人使用习惯,可能我们还是比较习惯用windows.虽然说在wind ...

  9. 一个简单的游标删除SQL SERVER表

    use databaseName declare @tblname char(100) declare @sql char(5000) declare table_cursor cursor for ...

  10. 自己写的sql server触发器练练--高手请您跳过吧

    set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER TRIGGER [insertReplyToic] ON [dbo].[bbsReplyTopic] ...