变动事件
DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示
变动事件是为XML或HTML DOM 设计的,并不特定于某种语言
DOM2级定义了如下变动事件:
- DOMSubtreeModified:在DOM结构发生变化时触发,即会在下面所有事件触发后触发
- DOMNodeInserted:当一个节点作为子节点插入另一个节点中时触发
- DOMNodeRemoved:节点从父节点中移除时触发
- DOMNodeInsertedIntoDocument:一个节点被直接插入文档或通过子树间接插入文档后触发,在DOMNodeInserted 事件之后触发
- DOMNodeRemovedFromDocument:一个节点直接从文档移除,或通过子树间接从文档移除触发,在DOMNodeRemoved 事件之后触发
- DOMAttrModified:特性被修改之后触发
- DomCharacterDataModified:在文本节点的值发生变化时触发
可以使用以下代码判断浏览器对变动事件的支持性:
var isSupported = document.implementation.hasFeature("MutationEvents","2.0");
由于DOM3作废了其中的部分变动事件,所以下面只介绍仍被支持的事件
删除节点
当我们使用 removeChild() 或 replace Child()从DOM中删除节点时
首先会触发 DOMNodeRemoved 事件
在这个事件的 event 事件对象中
event.target 是被删除的节点
event.relatedNode 则是对目标节点的父节点的引用
在该事件触发时,目标节点还尚未从其父节点移除,因此这时其 paerentNode 仍指向其父节点
该事件会冒泡因此可以在DOM的任何层次上处理它
此后在目标节点即其子节点(如果有的话)会相继触发 DOMNodeRemovedFromDocument 事件,该事件不会冒泡,所以只能在事件流的处于目标阶段进行处理
此外该事件的 event 对象不包含其它信息如:不包括relatedNode
然后触发 DOMSubtreeModified 事件,事件的目标元素是被移除元素的父节点
此时的事件对象也不会提供额外的信息,如:relatedNode
插入节点
在使用 append Child()replaceChild()或者insertBefore()向DOM中插入节点时
首先会触发 DOMNodeInserted 事件
该事件的目标是被插入的节点
同样地,event.relatedNode 指向目标节点的父节点
当该事件触发时 目标元素已经插入到了新的父节点中 ,该事件是冒泡的,同样可以在DOM的各个层次上对其进行处理
此后会触发 DOMNodeInsertedIntoDocument 事件,该事件不冒泡
所以需要在插入之前为目标元素添加该事件的事件处理程序
最后一个触发的事件是 DOMSubtreeModified,在插入后的插入节点的父节点上触发