jacascript DOM变动事件
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
DOM变动事件
变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛;
删除节点变动
删除节点时,涉及到 DOMNodeRemoved、DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件;事件触发的先后顺序是 DOMNodeRemoved 事件、DOMNodeRemovedFromDocument 事件和 DOMSubtreeModified 事件,下面将详细介绍;
在使用 removeChild() 或 replacechild() 从DOM中删除节点时,会触发 DOMNodeRemoved 事件。而 event.relatedNode 属性中包含着对目标节点父节点的引用。在这个事件触发时,节点尚未从其父节点删除,因此其 parentNode 属性仍然指向父节点。该事件会冒泡;IE8及以下浏览器不支持;
<div id="wrapper" style="height: 50px; width: 100px;">
<div id="test">1</div>
</div>
<div id="btn">删除子节点</div>
<script type="text/javascript">
var oWrapper = document.getElementById("wrapper");
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMNodeRemoved",function(ev){
ev = ev || event;
console.log(ev.target.innerHTML);
ev.relatedNode.style.backgroundColor = 'red';
// this.parentNode.style.backgroundColor = 'red';
}) oBtn.onclick = function(){
oWrapper.removeChild(oTest);
}
</script>
如果被移除的节点包含子节点,那么在其所有子节点以及这个被移除的节点上会相继触发 DOMNodeRemovedFromDocument 事件,这个事件不会冒泡,目标 target 指向被移除的节点;该事件只有 chrome/safari/opera 浏览器支持;
<div id="wrapper" style="height: 50px; width: 100px;">
<div id="test">1</div>
</div>
<div id="btn">删除子节点</div>
<script type="text/javascript">
var oWrapper = document.getElementById("wrapper");
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMNodeRemovedFromDocument",function(ev){
ev = ev || event;
console.log(ev.target.innerHTML);
// this.parentNode.style.backgroundColor = 'green';
}) oBtn.onclick = function(){
oWrapper.removeChild(oTest);
}
</script>
在DOM结构中发生任何变化时都会触发 DOMSubtreeModified 事件,该事件在其他任何事件触发后都会触发,该事件的目标是被移除节点的父节点;IE8及以下浏览器不支持;
<div id="wrapper" style="height: 50px; width: 100px;">
<div id="test">1</div>
</div>
<div id="btn">删除子节点</div>
<script type="text/javascript">
var oWrapper = document.getElementById("wrapper");
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oWrapper.addEventListener("DOMSubtreeModified",function(ev){
ev = ev || event;
console.log(ev.type);//DOMSubtreeModified
// this.style.backgroundColor = 'pink';
}) oBtn.onclick = function(){
oWrapper.removeChild(oTest);
}
</script>
插入节点变动
插入节点时涉及到 DOMNodeInserted 事件、DOMNodeInsertedIntoDocument 事件及 DOMSubtreeModified 事件,事件触发的先后顺序是 DOMNodeInserted 事件、DOMNodeInsertedIntoDocument 事件和 DOMSubtreeModified 事件,下面将详细介绍;
在使用 appendChild()、replaceChild() 或 insertBefore() 向DOM中插入节点时,首先触发 DOMNodeInserted 事件;这个事件的目标是被插入的节点,而 event.relatedNode 属性中包含一个对父节点的引用;在这个事件触发时,节点已经被插入到了新的父节点中。这个事件是冒泡的,因此可以在DOM的各个层次上处理它;IE8及以下浏览器不支持;
<div id="wrapper" style="height: 50px; width: 100px;">
</div>
<div id="btn">添加子节点</div>
<div id="test">1111111</div>
<script type="text/javascript">
var oWrapper = document.getElementById("wrapper");
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMNodeInserted",function(ev){
ev = ev || event;
ev.relatedNode.style.backgroundColor = 'pink';
// this.parentNode.style.backgroundColor = 'pink';
}) oBtn.onclick = function(){
oWrapper.appendChild(oTest);
}
</script>
在新插入的节点上面会触发 DOMNodeInsertedIntoDocument 事件。这个事件不冒泡,因此必须在插入节点之前为它添加这个事件处理程序。这个事件的目标是被插入的节点;该事件只有chrome/safari/opera浏览器支持;
<div id="wrapper" style="height: 50px; width: 100px;">
</div>
<div id="btn">添加子节点</div>
<div id="test">1111111</div>
<script type="text/javascript">
var oWrapper = document.getElementById("wrapper");
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMNodeInsertedIntoDocument",function(ev){
ev = ev || event;
this.style.backgroundColor = 'greenyellow';
}) oBtn.onclick = function(){
oWrapper.appendChild(oTest);
}
</script>
特性节点变动
当特性被修改后,DOMAttrmodified 事件被触发;该事件只有 firefox 和 IE8及以上浏览器支持;
<div id="test" style="height: 50px; width: 100px;"></div>
<div id="btn">特性节点测试</div>
<script type="text/javascript">
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMAttrModified",function(ev){
ev = ev || event;
this.style.backgroundColor = 'greenyellow';
}) oBtn.onclick = function(){
oTest.setAttribute('title','123');
}
</script>
文本节点变动
当文本节点的值发生变化时,触发 DOMCharacterDataModified 事件;该方法只有 chrome/safari/opera 浏览器支持;
<div id="test" style="height: 50px; width: 100px;">hello</div>
<div id="btn">特性节点测试</div>
<script type="text/javascript">
var oTest = document.getElementById("test");
var oBtn = document.getElementById("btn"); oTest.addEventListener("DOMCharacterDataModified",function(ev){
ev = ev || event;
this.style.backgroundColor = 'greenyellow';
}) oBtn.onclick = function(){
oTest.innerHTML = 'hello world';
}
</script>
jacascript DOM变动事件的更多相关文章
- 深入理解DOM事件类型系列第三篇——变动事件
× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...
- JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点(转)
复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中 ...
- Javascript高级编程学习笔记(66)—— 事件(10)变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- javaScript事件(八)事件类型之变动事件
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...
- 变动事件_DOM2级的变动事件(mutation)
DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...
- JavaScript 变动事件
变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. 任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化就会触动变动事件. 1 <html> ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
随机推荐
- MYSQL数据库学习九 数据的操作
9.1 插入数据记录 1. 插入完整或部分数据记录: INSERT INTO table_name(field1,field2,field3,...fieldn) VALUES(value1,valu ...
- Django——ORM
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- 源码实现 --> strdel
删除字符串中某个字符strdel 函数 char *strDel(char* str,const char chToDel) 不是库里面的函数,自己实现的原型,删除str中所有的chToDel字符. ...
- Pla
Pla(jdoj1006) 题目大意:给你n个矩形,并排放在一起,你的目的是将所有的矩形全部染色.你每次染的形状为一个矩形,问:最少需要染多少次? 注释:n<=10^6,wi , hi<= ...
- NVL2 这个函数,
NVL2(expr1,expr2,expr3) 如果参数表达式expr1值为NULL,则NVL2()函数返回参数表达式expr3的值:如果参数表达式expr1值不为NULL,则NVL2()函数 ...
- (译文)学习ES6非常棒的特性-字符串常量基础
字符串常量基础 在ES2015之前我们是这么拼接字符串的: var result = 10; var prefix = "the first double digit number I le ...
- KS检验统计量的扩展应用(CMap)
KS检验统计量的扩展应用 KS(Kolmogorov-Smirnov)检验是比较两个经验分布之间是否存在差异. 我们设X1, X2,-, Xm, Y1, Y2,-, Ym为两个独立随机样本,分别满足假 ...
- p-value
p-value p-value翻译为假定值,假设几率.我们在生物信息中通常使用p值方法(P-Value, Probability, Pr)来做检验.那么p-value是什么呢?其实P-value就是一 ...
- 深入理解C++ new/delete, new []/delete[]动态内存管理
在C语言中,我们写程序时,总是会有动态开辟内存的需求,每到这个时候我们就会想到用malloc/free 去从堆里面动态申请出来一段内存给我们用.但对这一块申请出来的内存,往往还需要我们对它进行稍许的“ ...
- 《团队-OldNote-项目总结》
我们小组做的是手机便签的app---OldNote 最开始我们想解决普通手机便签无法进行语音和照片的备忘这一问题,但是由于没有做过拍照和录音的经验怕由于技术原因无法达成目的,就没敢写在需求分析中.当完 ...