深入理解DOM事件类型系列第三篇——变动事件
前面的话
变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛
删除节点
删除节点时,涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified这三个事件,下面将详细介绍
DOMNodeRemoved
在使用removeChild()或replacechild()从DOM中删除节点时,会触发DOMNodeRemoved事件。而event.relatedNode属性中包含着对目标节点父节点的引用。在这个事件触发时,节点尚未从其父节点删除,因此其parentNode属性仍然指向父节点。该事件会冒泡
[注意]IE8-浏览器不支持
<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn">删除子节点</button>
<script>
inBox.addEventListener('DOMNodeRemoved',function(e){
e = e || event;
e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>
DOMNodeRemovedFromDocument
如果被移除的节点包含子节点,那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFromDocument事件,这个事件不会冒泡,目标target指向被移除的节点
[注意]该事件只有chrome/safari/opera浏览器支持
<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn">删除子节点</button>
<script>
inBox.addEventListener('DOMNodeRemovedFromDocument',function(e){
e = e || event;
console.log(e.target.innerHTML)//1
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>
DOMSubtreeModified
在DOM结构中发生任何变化时都会触发DOMSubtreeModified事件,该事件在其他任何事件触发后都会触发
该事件的目标是被移除节点的父节点
[注意]IE8-浏览器不支持
<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn">删除子节点</button>
<script>
box.addEventListener('DOMSubtreeModified',function(e){
e = e || event;
console.log(e.type)//DOMSubtreeModified
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>
顺序
删除节点时,事件触发的先后顺序是DOMNodeRemoved事件、DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件
<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<div id="result"></div>
<button id="btn">删除子节点</button>
<script>
inBox.addEventListener('DOMNodeRemoved',handler);
box.addEventListener('DOMSubtreeModified',handler);
inBox.addEventListener('DOMNodeRemovedFromDocument',handler);
function handler(e){
e = e || event;
result.innerHTML += e.type + ';';
}
btn.onclick = function(){
box.removeChild(inBox);
}
</script>
插入节点
插入节点时涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件,下面将详细介绍
DOMNodeInserted
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先触发DOMNodeInserted事件
这个事件的目标是被插入的节点,而event.relatedNode属性中包含一个对父节点的引用
在这个事件触发时,节点已经被插入到了新的父节点中。这个事件是冒泡的,因此可以在DOM的各个层次上处理它
[注意]IE8-浏览器不支持
<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn">插入节点</button>
<script>
box.addEventListener('DOMNodeInserted',function(e){
e = e || event;
e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
document.body.appendChild(box);
}
</script>
DOMNodeInsertedIntoDocument
在新插入的节点上面会触发DOMNodeInsertedIntoDocument事件。这个事件不冒泡,因此必须在插入节点之前为它添加这个事件处理程序。这个事件的目标是被插入的节点
[注意]该事件只有chrome/safari/opera浏览器支持
<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn">插入节点</button>
<script>
box.addEventListener('DOMNodeInsertedIntoDocument',function(e){
e = e || event;
box.style.background = 'lightblue';
});
btn.onclick = function(){
document.body.appendChild(box);
}
</script>
顺序
插入节点时,事件触发的先后顺序是DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件和DOMSubtreeModified事件
<div id="box" style="height: 30px;width: 100px;">
</div>
<div id="outer"></div>
<div id="result"></div>
<button id="btn">插入子节点</button>
<script>
box.addEventListener('DOMNodeInserted',handler);
outer.addEventListener('DOMSubtreeModified',handler);
box.addEventListener('DOMNodeInsertedIntoDocument',handler);
function handler(e){
e = e || event;
result.innerHTML += e.type + ';';
}
btn.onclick = function(){
outer.appendChild(box);
}
</script>
特性节点
DOMAttrmodified
当特性被修改后,DOMAttrmodified事件被触发
[注意]该事件只有firefox和IE8+浏览器支持
<div id="box" title="123" style="height: 30px;width: 100px;"></div>
<button id="btn">修改特性</button>
<script>
box.addEventListener('DOMAttrModified',handler);
function handler(e){
e = e || event;
box.innerHTML = e.type;
}
btn.onclick = function(){
box.setAttribute('title','abc');
}
</script>
文本节点
DOMCharacterDataModified
当文本节点的值发生变化时,触发DOMCharacterDataModified事件
[注意]该方法只有chrome/safari/opera浏览器支持
<div id="box" style="height: 30px;width: 100px;">abc</div>
<button id="btn">修改文本</button>
<script>
box.addEventListener('DOMCharacterDataModified',handler);
function handler(e){
e = e || event;
console.log(e)
box.style.background = 'pink';
}
btn.onclick = function(){
box.innerHTML = '123';
}
</script>
最后
上面7个变动事件,浏览器兼容性都不是太好。唯三过得去就是DOMNodeInserted、DOMNodeRemoved和DOMSubtreeModified这三个事件,不兼容IE8-浏览器
深入理解DOM事件类型系列第三篇——变动事件的更多相关文章
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...
- 深入理解DOM事件类型系列第四篇——剪贴板事件
× 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...
- 深入理解DOM事件机制系列第三篇——事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...
- 深入理解DOM事件类型系列第六篇——加载事件
前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
- WWF3事件类型活动<第三篇>
WWF将工作流分为两大类: 面向Human:在工作流运行时通过用户对外部应用程序的操作来影响工作流的业务流转. 面向System:应用程序控制流程. 工作流与应用程序都是可以单独存在的,因此它们之间的 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
随机推荐
- homebrew update 出现Failure while executing: git pull --quiet origin refs/heads/master:refs/remotes/origin/master解决方案
具体可以参考https://github.com/Homebrew/homebrew/issues/21002 cd /usr/local git status git reset --hard or ...
- ACM: Gym 101047B Renzo and the palindromic decoration - 手速题
Gym 101047B Renzo and the palindromic decoration Time Limit:2000MS Memory Limit:65536KB 64 ...
- JS操作Json
因为我水啊 所以我就要手打一下 熟悉一下 ===== JSON 全称 JavaScript Object Notation(标记) 一种轻量级的数据交互格式,采用完全独立于语言的文本格式 同事JSON ...
- hdu3549还是网络流
最后一次训练模板(比较熟练了) 接下来训练网络流的建图 #include <cstdio> #define INF 2147483647 int n,m,ans,x,y,z,M,h,t,T ...
- 树形DP
切题ing!!!!! HDU 2196 Anniversary party 经典树形DP,以前写的太搓了,终于学会简单写法了.... #include <iostream> #inclu ...
- jsp使用EL表达式回传boolean值出错的问题
在最近做的一个项目中使用session回传的属性中有一个为boolean,报出错. 属性名字为"isAdmit",布尔类型.后来我上网查了一下,是因为我使用了Myeclipse的自 ...
- [LintCode] Container With Most Water 装最多水的容器
Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...
- winhttp demo
#include <string>#include <iostream>#include <windows.h>#include <winhttp.h> ...
- apk 反编译
http://blog.csdn.net/vipzjyno1/article/details/21039349/ [置顶] Android APK反编译就这么简单 详解(附图) 标签: android ...
- 如何设置mysql远程访问及防火墙设置
笔者在一个实际的项目中需要MYSQL远程访问. 情景: 安装好Mysql, 本地访问正常,很奇怪局域的机器都无法访问该服务器上的MYSQL数据库. 经过资料查找 原来Mysql默认是不可以通过远程机器 ...