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

  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有问题欢迎与我讨论,共同进步。

时间: 2024-10-10 00:16:29

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

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

复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中: compositionstart:要开始输入: compositionupdate:插入新字符: compositionend:复合系统关闭,返回正常键盘输入状态: event.data data属性: compositionstart访问data:正在编辑的文本: compositionupd

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

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 以上内容见javaScript事件(四)event的公共成员 七.鼠标事件 DOM3级事件中定义了9个鼠标事件. mousedown:鼠标按钮被按下(左键或者右键)时触发.不能通过键盘触发. mouseup:鼠标按钮被释放弹起时触发.不能通过键盘

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

× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛 删除节点 删除节点时,涉及到DOMNodeRemoved事件.DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件这三个事件,下面将详细介绍 DOMNodeRemoved 在使用removeChild()或r

JavaScript高级程序设计:第十三章 事件

JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的顺序.在主流浏览器中有两种事件接收方式.一种是IE提出的事件冒泡流,另一种是Netscape提出的事件捕获流.顾名思义,事件冒泡流是从被点击的最小元素逐渐向上索引DOM树,而事件捕获的思想是不太具体的节点先捕捉到事件,然后事件沿DOM树逐渐向下,一直传播到事件的实际目标. 由于老版本浏览器不支持事件

Javascript 事件对象(六)键盘事件

keyCode获取用户按下键盘的哪个按键 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 onkeydown : 当键盘按键按下的时候触发

jacascript DOM变动事件

DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛: 删除节点变动 删除节点时,涉及到 DOMNodeRemoved.DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件:事件触发的先后顺序是 DOMNodeRemoved 事件.DOMNodeRemovedFromDocument 事件和 DOMSub

DOM事件总结(事件处理程序的类型及浏览器的兼容性)

事件处理: 1.HTML事件处理程序 例子: <input type="button" id="btn" value="click me" onclick="alert('Hello!');"> 或者: <input type="button" id="btn" value="click me" onclick="show()"&

JavaScript中,有三种常用的绑定事件的方法

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中:

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

转载: http://www.cnblogs.com/lvdabao/p/3265870.html 一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加百度的实习生面试,被问到事件模型,当时被问的一头雾水,平时敲onclick敲的挺爽,却没有关注到事件模型的整体概念.这个周末难得清闲,决定就javascript中的事件模型写个系列,算是对知识点的一个