DOM2 级的变动（mutation）事件能在 DOM中的某一部分发生变化时给出提示。变动事件是为 XML或 HTML DOM设计的，并不特定于某种语言。DOM2 级定义了如下变动事件。
DOMSubtreeModified ：在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发
DOMNodeInserted ：在一个节点作为子节点被插入到另一个节点中时触发。
DOMNodeRemoved ：在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument ：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 之后触发。
DOMNodeRemovedFromDocument ：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 之后触发。
DOMAttrModified ：在特性被修改之后触发。
DOMCharacterDataModified ：在文本节点的值发生变化时触发.
使用下列代码可以检测出浏览器是否支持变动事件：
var isSupported = document.implementation.hasFeature("MutationEvents", "2.0");删除节点
在使用 removeChild() 或 replaceChild() 从DOM中删除节点时，首先会触发 DOMNodeRemoved事件。这个事件的目标（ event.target ）是被删除的节点，而 event.relatedNode 属性中包含着对目标节点父节点的引用。在这个事件触发时，节点尚未从其父节点删除，因此其 parentNode 属性仍然指向父节点（与 event.relatedNode 相同）。这个事件会冒泡，因而可以在 DOM 的任何层次上面处理它。
如果被移除的节点包含子节点，那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFromDocument 事件。但这个事件不会冒泡，所以只有直接指定给其中一个子节点的事件处理程序才会被调用。这个事件的目标是相应的子节点或者那个被移除的节点，除此之外 event对象中不包含其他信息。
紧随其后触发的是 DOMSubtreeModified 事件。这个事件的目标是被移除节点的父节点；此时的event 对象也不会提供与事件相关的其他信息。
为了理解上述事件的触发过程，下面我们就以一个简单的 HTML 页面为例。
<! DOCTYPE html>
<html>
<head>
<title>Node Removal Events Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>在这个例子中，我们假设要移除 <ul>元素。此时，就会依次触发以下事件。
(1) 在 <ul> 元素上触发 DOMNodeRemoved 事件。 relatedNode 属性等于 document.body 。
(2) 在 <ul> 元素上触发 DOMNodeRemovedFromDocument 事件。
(3) 在身为 <ul> 元素子节点的每个 <li> 元素及文本节点上触发DOMNodeRemovedFromDocument事件。
(4) 在 document.body 上触发 DOMSubtreeModified 事件，因为<ul> 元素是 document.body的直接子元素。
2. 插入节点
在使用 appendChild() 、 replaceChild() 或 insertBefore() 向 DOM 中插入节点时，首先会触发 DOMNodeInserted 事件。这个事件的目标是被插入的节点，而 event.relatedNode 属性中包含一个对父节点的引用。在这个事件触发时，节点已经被插入到了新的父节点中。这个事件是冒泡的，因此可以在 DOM的各个层次上处理它。
紧接着，会在新插入的节点上面触发 DOMNodeInsertedIntoDocument 事件。这个事件不冒泡，因此必须在插入节点之前为它添加这个事件处理程序。这个事件的目标是被插入的节点，除此之外event 对象中不包含其他信息。
最后一个触发的事件是 DOMSubtreeModified ，触发于新插入节点的父节点。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
