Javascript高级编程学习笔记（66）—— 事件（10）变动事件

变动事件

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，在插入后的插入节点的父节点上触发