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>
cloneNode小结的更多相关文章
- Javascript基础篇小结
转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器 ...
- 3月web前端面试小结
说一下box-sizing的应用场景 box-sizing的属性值分为两个,border-box和content-box,其中, border-box:width=content+padding+bo ...
- 从零开始编写自己的C#框架（26）——小结
一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...
- Python自然语言处理工具小结
Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...
- java单向加密算法小结(2)--MD5哈希算法
上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...
- iOS--->微信支付小结
iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...
- iOS 之UITextFiled/UITextView小结
一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...
- K近邻法(KNN)原理小结
K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...
- scikit-learn随机森林调参小结
在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...
随机推荐
- JVM学习之Eclipse输出GC日志
Java应用启动时,可以通过设置verbose参数来输出JVM的gc情况,命令如下:-verbose:gc或者-XX:+PrintGC在Eclipse中可以通过Run As|Run Configura ...
- C#学习日志 day 6 ------ 常用正则表达式例举
c#支持正则表达式匹配文本,这里讨论一下正则表达式的使用方法以及例举一些常用的正则表达式的匹配. 1.在vs中使用正则表达式 在vs中使用正则表达式,需要using System.Text.Regul ...
- TCPL 行计数
C programming language: P13 行计数 e.g. #include <stdio.h>int main(void){ int c, nb, nt, nl; ...
- ADO.NET入门
什么是ADO.NET ADO.NET就是一组类库,这组类库可以让我们通过程序的方式访问数据库,就像System.IO下的类用类操作文件一样, System.Data.这组类是用来操作数据库(不光是MS ...
- Flex整合Spring
工程需要整合Spring和Flex,在网上众多方法中找到了下面这种,记录留存. 个人认为该方法更适合在已有Spring框架的工程中添加Flex时使用,对原工程内容(主要指配置文件)改动较小. 1.添加 ...
- Data Visualization 课程 笔记2
2-D Graphics vector graphics : the graphics that used for drawing shapes with vertices, strokes and ...
- Ubuntu 14.04安装地里编码软件Nominatim过程
一.必须软件: 在Ubuntu系统编译执行Nominatim软件系统必须安装的软件有: 1.GCC 编译器 2.postgresql 数据库 3.proj4 4.geos 5.postgis 6.PH ...
- c# 针对不同数据库进行参数化查询
使用参数化 DbCommand 的一个缺点是需要参数的代码将仅适用于支持相同语法的提供程序.OLEDB.SqlClient 和 Oracle 提供程序全部使用不同的语法.例如,用于命名和指定参数的 S ...
- 虚拟键盘，移动web开发的痛
原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方.如下图: 如果移动端web也想做类似的功能,可以实现吗? 你可能会说着:“不就是放一个position: fixed;的输入框在 ...
- 性能优化工具---vmstat
作用: 报告关于内核线程.虚拟内存.磁盘.陷阱和 CPU 活动的统计信息 参数: 通过两个数字参数来完成的,第一个参数是采样的时间间隔数,单位是秒,第二个参数是采样的次数 显示说明: 第一行数据反映开 ...