变动事件_DOM2级的变动事件(mutation)
DOM2级定义了如下变动事件：
- DOMSubtreeModified：
在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。 - DOMNodeInserted：
在一个节点作为子节点被插入到另一个节点中时触发 - DOMNodeRemoved：
在节点从其父节点中被移除时触发 - DOMNodeInsertIntoDocument：
在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发 - DOMNodeRemovedFromDocument：
在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发 - DOMAttrModified：在特性被修改之后触发
- DOMCharacterDataModified：在文本节点的值发生变化时触发。
使用下列代码可以检测出浏览器是否支持变动事件：
var isSupported = document.implementation.hasFeature('MutationEvents','2.0');
IE8之前的版本不支持任何变动事件
由于DOM3级事件模块作废了很多变动事件
- 删除节点
在使用removeChild()和replaceChild()从DOM中删除节点时：
首先触发DOMNodeRemoved事件
这个事件的目标（event.target）是被删除的节点
</head>
<body style='height:3000px;'> <ul id='myList'>
<li>Item 1</li>
</ul>
<div id="div1"></div>
<script>
var EventUtil = {
addHandler: function(element,type,handler){//添加事件
if (element.addEventListener)
{
element.addEventListener(type,handler,false);
}else if (element.attachEvent)
{
element.attachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
getEvent: function(event){//获得事件对象
return event || window.event;
},
getTarget: function(event){//获得事件元素
return event.target || event.srcElement;
},
preventDefault: function(){//取消默认事件行为
if (event.preventDefault)
{
event.preventDefault();
}else {
event.returnValue = false;
}
},
removeHandler: function(element,type,handler){//取消事件
if (element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}else if (element.dettchEvent)
{
element.dettchEvent('on'+type,handler);
}else {
element['on'+type] = null;
}
},
stopPropagation: function(event){//取消冒泡机制
if (event.stopPropagation)
{
event.stopPropagation();
}else {
event.cancleBubble = true;
}
},
getRelatedTarget: function(event){
if (event.relatedTarget)
{
return event.relatedTarget;//标准下返回相关元素
}else if (event.toElement)
{
return event.toElement;//mouseout事件触发，保存相关元素
}else if (event.fromElement)
{
return event.fromElement;//mouseover事件触发，保存相关元素
}
},
getButton: function(event){//鼠标按钮兼容
if (document.implementation.hasFeature('MouseEvents','2.0'))//标准下
{
return event.button;
}else {
switch (event.button)//非标准下
{
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
getWheelDelta: function(event){//滚轮事件兼容
//所以要兼容，写两个函数函数
//client的兼容性必须先写出来
if (event.wheelDelta)
{
/*
兼容opear9.5以前版本的正负相反，mousewheel
*/
return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
}else {
/*
兼容firefox正负和3的倍数的问题，DOMMouseScroll
*/
return -event.detail*40;
}
},
getCharCode: function(event){//键盘事件兼容
if (typeof event.charCode == 'number')//首先检测按键有没有代表的字符，如果没有就没有charCode，为undefined
{
return event.charCode;
}else {
return event.keyCode
}
}
} EventUtil.addHandler(window,'load',function(event){
var list = document.getElementById('myList'); EventUtil.addHandler(document,'DOMSubtreeModified',function(event){
console.log('--------------------------------------------');
console.log( 'DOMSubtreeModified:改变DOM结构' );
console.log(event.type);
console.log(event.target);
});
EventUtil.addHandler(document,'DOMNodeRemoved',function(event){
console.log('--------------------------------------------');
console.log( 'DOMNodeRemoved:删除节点' );
console.log(event.type);
console.log(event.target);
console.log(event.relatedNode);
}); EventUtil.addHandler(list.firstChild,'DOMNodeRemovedFromDocument',function(event){
console.log('--------------------------------------------');
console.log( 'DOMNodeRemovedFromDocument:从文档中删除节点' );
console.log(event.type);
console.log(event.target);
}); list.parentNode.removeChild(list);
});
</script>
执行顺序是：
- 删除节点：DOMNodeRemove
- 从document中删除节点：DOMNodeRemovedFromDocument
- 改变DOM结构：DOMSubtreeModified
- 插入节点
在使用appendChild()、replaceChild()、insertBefore()向DOM中插入节点时，
执行顺序是：
- DOMNodeInserted事件：这个事件的目标是插入的节点，而event.relatedNode属性中包含一个对父节点的引用。这个事件是冒泡的
- DOMNodeInsertedIntoDocument事件：这个事件不冒泡，因此必须在插入节点之前为它添加这个事件处理程序。这个事件的目标是被插入的节点。
- DOMSubtreeModified：DOM结构发生变化触发
例子：
<body style='height:3000px;'>
<div id="div1"></div>
<script>
var EventUtil = {
addHandler: function(element,type,handler){//添加事件
if (element.addEventListener)
{
element.addEventListener(type,handler,false);
}else if (element.attachEvent)
{
element.attachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
getEvent: function(event){//获得事件对象
return event || window.event;
},
getTarget: function(event){//获得事件元素
return event.target || event.srcElement;
},
preventDefault: function(){//取消默认事件行为
if (event.preventDefault)
{
event.preventDefault();
}else {
event.returnValue = false;
}
},
removeHandler: function(element,type,handler){//取消事件
if (element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}else if (element.dettchEvent)
{
element.dettchEvent('on'+type,handler);
}else {
element['on'+type] = null;
}
},
stopPropagation: function(event){//取消冒泡机制
if (event.stopPropagation)
{
event.stopPropagation();
}else {
event.cancleBubble = true;
}
},
getRelatedTarget: function(event){
if (event.relatedTarget)
{
return event.relatedTarget;//标准下返回相关元素
}else if (event.toElement)
{
return event.toElement;//mouseout事件触发，保存相关元素
}else if (event.fromElement)
{
return event.fromElement;//mouseover事件触发，保存相关元素
}
},
getButton: function(event){//鼠标按钮兼容
if (document.implementation.hasFeature('MouseEvents','2.0'))//标准下
{
return event.button;
}else {
switch (event.button)//非标准下
{
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
getWheelDelta: function(event){//滚轮事件兼容
//所以要兼容，写两个函数函数
//client的兼容性必须先写出来
if (event.wheelDelta)
{
/*
兼容opear9.5以前版本的正负相反，mousewheel
*/
return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
}else {
/*
兼容firefox正负和3的倍数的问题，DOMMouseScroll
*/
return -event.detail*40;
}
},
getCharCode: function(event){//键盘事件兼容
if (typeof event.charCode == 'number')//首先检测按键有没有代表的字符，如果没有就没有charCode，为undefined
{
return event.charCode;
}else {
return event.keyCode
}
}
} EventUtil.addHandler(window,'load',function(event){
var oDiv = document.getElementById('div1');
var oSpan = document.createElement('span');
oSpan.id = 'span1';
function add(){
oDiv.appendChild(oSpan);
}
function DOMSubtreeModified(event){
event = EventUtil.getEvent(event);
console.log('----------------------------------------');
console.log(event.type);
console.log(event.target);
//console.log(event.relatedNode);
} function DOMNodeInserted(event){
event = EventUtil.getEvent(event);
console.log('----------------------------------------');
console.log(event.type);
console.log(event.target);
console.log(event.relatedNode);
} function DOMNodeInsertedIntoDocument(event){
event = EventUtil.getEvent(event);
console.log('----------------------------------------');
console.log(event.type);
console.log(event.target);
//console.log(event.relatedNode);
} EventUtil.addHandler(oDiv,'click',add);
EventUtil.addHandler(document,'DOMSubtreeModified',DOMSubtreeModified);
EventUtil.addHandler(document,'DOMNodeInserted',DOMNodeInserted);
EventUtil.addHandler(oSpan,'DOMNodeInsertedIntoDocument',DOMNodeInsertedIntoDocument);
}); </script>
</body>
由于DOMSubtreeModified和DOMNodeInserted事件是冒泡的，所以它们的事件处理程序是添加到文档上的，
在将oSpan插入到其父节点之前，先将DOMNodeInsertedIntoDocument事件的事件处理程序添加给oSpan。
最后用appendChild()来添加这个oSpan；
此时事件开始依次触发。
首先是在新的oSpan元素上触发DOMNodeInserted事件，其relatedNode是oDiv元素，
然后触发oSpan元素上的DOMInsertedIntoDocument事件
最后触发oDiv上的DOMSubtreeModified事件
变动事件_DOM2级的变动事件(mutation)的更多相关文章
- Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- Javascript高级编程学习笔记（71）—— 模拟事件（1）DOM事件模拟
事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- 深入理解DOM事件机制系列第一篇——事件流
× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...
- js事件（一）之事件流
1.事件流定义 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
随机推荐
- To be a better me
2017.4.15 突然成为前端实习生.做了两个周的官网项目,主要是更新官网一些文字图片以及新加一个页面,因为是静态页面,所以熟悉了代码就上手了.幸好没出什么差错. 两周后,实习结束. 2017.7. ...
- 【分布式架构】“spring cloud”与“dubbo”微服务的对比
秉承站在巨人的肩膀上,同时我也不想重复制造轮子,我发现了一系列关于“分布式架构”方面,我需要,同时能够解决我的一些疑惑.问题的博客,转载过来,原文链接: http://blog.csdn.net/ ...
- swift - 本地通知
1. AppDelegate 注册 class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? fun ...
- [leetcode]311. Sparse Matrix Multiplication 稀疏矩阵相乘
Given two sparse matrices A and B, return the result of AB. You may assume that A's column number is ...
- ubuntu下安装nginx1.11.10
(本页仅作为个人笔记参考) 为openssl,zlib,pcre配置编译 wget http://om88fxbu9.bkt.clouddn.com/package/nginx/nginx-1.11. ...
- mysql5.5以上my.ini中设置字符集
在mysql5.1之前数据库设置字符集: [mysqld] default-character-set = utf8 mysql5.5以后[mysqld]中就不能使用default-character ...
- Await Async和Thread.waitAll想法?未完待续
[管理员]四九-李冰-修行者(2216529884) 2017/7/3 17:15:12 看着就可以了,这种东西是有使用场景的.并不是你用了就一定有提升的 [管理员]上海-xx科技(lovepoint ...
- 9.29 h5日记
1.CSS中哪些属性可以继承? font系列 text系列 color line-height 2.border-radius的值 值的顺序是左上 右上 右下 左下 则 border-radius:5 ...
- Oracle_PL/SQL(6) 触发器(序列、视图)
序列1.创建序列create sequence seq_alog start with 1 increment by 1 maxvalue 999999999999999999999999999 mi ...
- Android开发之SharedPreferences的封装
对于大部分初学者来说,如果想利用SharedPreferences进行数据存储的话大部分人(包括本人)应该会这样: 存储: SharedPreferences sharedPreferences = ...