javaScript事件（八）事件类型之变动事件
DOM2级的变动（mutation）事件能在DOM中某一部分发送变化时给出提示。变动事件为XML或HTML DOM设计的，并不特定于某种语言。DOM2级定义了如下变动事件。
- DOMSubtreeModifined:在DOM结构发生任何变化的时候。这个事件在其他事件触发后都会触发。
- DOMNodeInserted:当一个节点作为子节点被插入到另一个节点中时触发。
- DOMNodeRemoved:在节点从其父节点中移除时触发。
- DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发。
- DOMNodeRemovedFromDocument:在一个节点被直接从文档移除或通过子树间接从文档移除之前触发。这个事件在DOMNodeRemoved之后触发。
- DOMAttrModified：在特性被修改之后触发。
- DOMCharacterDataModified:在文本节点的值发生变化时触发。
使用下面点可以检测出浏览器是否支持变动事件：
var isSupported=document.implementation.hasFeature("MutationEvents","2.0");
IE8及更早版本不支持任何变动事件，其他浏览器支持也有差异：
DOM3废弃了很多变动事件。下面是一些仍然得到支持的事件。
1、删除节点
在使用removeChld()或replacedChild()从DOM中删除节点时，首先会触发DOMNodeRemoved事件。这个事件的目标（event.target） 是被删除的节点，而event.replatedNode属性中包含着对目标节点父节点的引用。
- 在这个事件被触发时，节点尚未从其父节点删除，因此其parentNode属性仍然指向父节点（与event.relatedNode相同）。这个事件会冒泡，因此可以在DOM的任何层次上面处理它。
- 如果被移除的节点包含子节点，那么在其所有子节点，以及这个被移除的节点 上会相继触发DOMNodeRemovedFromDocument事件。但这个事件不会冒泡，所以只有直接指定给其中一个子节点的事件处理程序才会被调用。这个事件的目标是相应的子节点或者那个被移除的节点，除此之外event对象中不包含其他信息。
- 紧随其后触发的是DOMSubtreeModified事件。这个事件的目标是被移除节点的父节点；此时的event对象也不会提供与事件相关的其他信息。
例子：
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
要移除<ul>元素，此时，就会依次触发以下事件。
- 在<ul>元素上触发DOMNodeRemoved事件，event.replatedNode为document.body
- 在<ul>元素上触发DOMNodeRemovedFromDocument事件。
- 在<ul>元素子节点的每个<li>元素及文本节点上触发DOMNodeRemovedFromDocument事件。
- 在document.body上触发DOMSubtreeModified事件。因为<ul>是document.body的直接子元素。
<script type="text/javascript">
EventUtil.addHandler(window,"load",function(event){
var list=document.getElementById("myList");
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(event.type);
console.log(event.target);
});
EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
console.log(event.type);
console.log(event.target);
console.log(event.relatedNode);
});
//不冒泡，所以添加到ul的第一个子节点（在兼容DOM的浏览器中是一个文本节点）
EventUtil.addHandler(list.firstChild,"DOMNodeRemovedFromDocument",function(event){
console.log(event.type);
console.log(event.target);
});
});
</script>
从文档中移除<ul>结果如下：
2、插入节点
在使用appendChild()，replaceChild()或insertBefore()向DOM中插入节点时，首先会触发DOMNodeInserted事件。这个事件的目标是被插入的节点，而event.relatedNode属性中包含一个对父节点的引用。
- 在这个事件被触发时，节点已经被插入到新的父节点中。这个事件会冒泡，因此可以在DOM的任何层次上面处理它。
- 紧接着，会在新插入的节点上面触发触发DOMNodeInsertedIntoDocument事件。这个事件不冒泡，因此必须在插入节点之前未它添加这个事件处理程序。这个事件的目标是被插入的节点，除此之外event对象中不包含其他信息。
- 最后一个触发的事件是DOMSubtreeModified事件,触发于新插入节点的父节点。
还是上面的例子：
EventUtil.addHandler(window,"load",function(event){
var list=document.getElementById("myList");
var item=document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(event.type);
console.log(event.target);
});
EventUtil.addHandler(document,"DOMNodeInserted",function(event){
console.log(event.type);
console.log(event.target);
console.log(event.relatedNode);
});
EventUtil.addHandler(list.firstChild,"DOMNodeInsertedIntoDocument",function(event){//不冒泡
console.log(event.type);
console.log(event.target);
});
list.appendChild(item);
});
执行结果：
首先在新<li>元素项上触发DOMNodeInserted事件，其relatedNode是<>ul元素。
然后触发新<li>元素上的DOMNodeInsertedIntoDocument事件，最后触发<ul>元素上的DOMSubtreeModified事件。
扩展阅读：
javaScript事件（四）event的公共成员（属性和方法）
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6559742.html有问题欢迎与我讨论，共同进步。
javaScript事件（八）事件类型之变动事件的更多相关文章
- 变动事件_DOM2级的变动事件(mutation)
DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...
- JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点(转)
复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中 ...
- javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- 深入理解DOM事件类型系列第三篇——变动事件
× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...
- javaScript事件（五）事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- JavaScript 变动事件
变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. 任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化就会触动变动事件. 1 <html> ...
- JavaScript学习日志（六）：事件
这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
随机推荐
- nginx proxy_set_header设置、自定义header
先来看下proxy_set_header的语法 语法: proxy_set_header field value; 默认值: proxy_set_header Host $proxy_host; pr ...
- HDU - 1402 A * B Problem Plus FFT裸题
http://acm.hdu.edu.cn/showproblem.php?pid=1402 题意: 求$a*b$ 但是$a$和$b$的范围可以达到 $1e50000$ 题解: 显然...用字符串模拟 ...
- ssdb主从及双主模型配置和简单管理
ssdb主从及双主模型配置和简单管理 levelDB是一个key->value 的数据存储库,其只能在本地保存数据,支持持久化,并且支持保存非常大的数据,单机redis在保存较大数据的时候数十G ...
- java结合testng，利用excel做数据源的数据驱动实例
数据驱动部分,是自动化测试常用部分,也是参数化设计的重要环节,前面分享了,mysql.yaml做数据源,那么再来分享下excel做数据驱动 思路: 先用POI读取excel.解析读取数据,返回list ...
- oracle 报表带小计合计
selectcase when (grouping(glbm)=1) then '合计' else DECODE(glbm,null,'',glbm) end glbm,case when (grou ...
- 练就Java24章真经—你所不知道的工厂方法
前言 最近一直在Java方向奋斗<终于,我还是下决心学Java后台了>,今天抽空开始学习Java的设计模式了.计划有时间就去学习,你这么有时间,还不来一起上车吗? 之所以要学习Java模式 ...
- Confluence 6 通过 SSL 或 HTTPS 运行 - 创建或请求一个 SSL 证书
在启用 HTTPS 之前,你需要一个有效的证书,如果你已经有了一个有效的证书,你可以直接跳过这个步骤,进入 step 2. 你可以创建一个自签名的证书,或者从信任的 Certificate Autho ...
- Spark-SQL之DataFrame操作
Spark SQL中的DataFrame类似于一张关系型数据表.在关系型数据库中对单表或进行的查询操作,在DataFrame中都可以通过调用其API接口来实现.可以参考,Scala提供的DataFra ...
- 【python】内存相关
1. /proc/pid/status 可以查看进程相关的详细信息,当内存异常时可查看 参考:http://blog.csdn.net/beckdon/article/details/4849190 ...
- hdu4612 卡cin e-DCC缩点
/* 给定无向图,求加入一条边后最少剩下多少桥 */ #include<bits/stdc++.h> using namespace std; #define maxn 200005 #d ...