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>元素,此时,就会依次触发以下事件。

  1. 在<ul>元素上触发DOMNodeRemoved事件,event.replatedNode为document.body
  2. 在<ul>元素上触发DOMNodeRemovedFromDocument事件。
  3. 在<ul>元素子节点的每个<li>元素及文本节点上触发DOMNodeRemovedFromDocument事件。
  4. 在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事件(一)事件流

javaScript事件(二)事件处理程序

javaScript事件(三)事件对象

javaScript事件(四)event的公共成员(属性和方法)

javaScript事件(五)事件类型之鼠标事件

javaScript事件(六)事件类型之滚轮事件

javaScript事件(七)事件类型之键盘与文本事件

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6559742.html有问题欢迎与我讨论,共同进步。

javaScript事件(八)事件类型之变动事件的更多相关文章

  1. 变动事件_DOM2级的变动事件(mutation)

    DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...

  2. JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点(转)

    复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中 ...

  3. javaScript事件(六)事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  4. 深入理解DOM事件类型系列第三篇——变动事件

    × 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...

  5. javaScript事件(五)事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  6. Javascript高级编程学习笔记(66)—— 事件(10)变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

  7. JavaScript 变动事件

    变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. 任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化就会触动变动事件. 1 <html> ...

  8. JavaScript学习日志(六):事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  9. Javascript事件模型系列(一)事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

随机推荐

  1. 应用 XAF 开发移动手机应用

    应用 XAF 开发移动手机应用: 1. How to create a native mobile or lightweight web client UI based on the existing ...

  2. MySQL主从复制报错1594处理【转】

    一.问题描述 Mysql主从复制模式中,slave上报错 “relay log read failure”,导致主从同步停止. mysql> show slave status\G ****** ...

  3. 设计模式C++学习笔记之九(Template Method模板方法模式)

      模板模式也是相当简单的一种模式,而且是比较常用的.模板模式是定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些 ...

  4. hibernate框架学习之核心API

    ConfigurationSessionFactorySessionTransactionQueryCriteria Configuration Configuration对象用于封装Hibernat ...

  5. <TCP/IP>链路层小结

    图片和部分内容转载自Chang Zhao   这章大致介绍了以太网,以太网帧的格式,网桥和交换机,无线局域网(Wi-Fi),点到点协议,MTU(最大传输单元)的知识点,所谓链路,在此可以解释为 IP数 ...

  6. $Django orm增删改字段、建表 ,单表增删改查,Django请求生命周期

    1 orm介绍  ORM是什么   ORM 是 python编程语言后端web框架 Django的核心思想,“Object Relational Mapping”,即对象-关系映射,简称ORM.  一 ...

  7. 【算法】狄克斯特拉算法(Dijkstra’s algorithm)

    狄克斯特拉算法(Dijkstra’s algorithm) 找出最快的路径使用算法——狄克斯特拉算法(Dijkstra’s algorithm). 使用狄克斯特拉算法 步骤 (1) 找出最便宜的节点, ...

  8. 洛谷P4451 [国家集训队]整数的lqp拆分 [生成函数]

    传送门 题意简述:语文不好不会写,自己看吧 思路如此精妙,代码如此简洁,实是锻炼思维水经验之好题 这种题当然是一眼DP啦. 设\(dp_n\)为把\(n\)拆分后的答案.为了方便我们设\(dp_0=1 ...

  9. Modbus库开发笔记之三:Modbus TCP Server开发

    在完成了前面的工作后,我们就可以实现有针对性的应用了,首先我们来实现Modbus TCP的服务器端应用.当然我们不是做具体的应用,而是对Modbus TCP的服务器端应用进行封装以供有需要时调用. 这 ...

  10. JdbcUtil

    package com.todaytech.pwp.core.exception; public class BizException extends RuntimeException { publi ...