变动事件
DOM2 级的变动（mutation）事件能在 DOM 中的某一部分发生变化时触发。
常见变动事件主要有：
- DOMSubtreeModified： 在 DOM 结构发生任何变化时触发。这个事件在其他事件触发后都会触发。
- DOMNodeInserted： 在一个节点作为子节点被插入到另一个节点时触发。
- DOMNodeRemoved： 在节点从其父节点中被移除时触发。
- DOMNodeInsertedIntoDocument： 在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 事件之后触发。
- DOMNodeRemovedFromDocument： 在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 事件之后触发。
检测是否支持变动事件
使用下列代码可检测：
var isSupported = document.implementation.hasFeature("MutationEvents", "2.0");
删除节点
在使用 removeChild（ ）或 replace（ ）从 DOM 中删除节点时会触发删除节点事件。
触发顺序
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
事件对象
DOMNodeRemoved 事件对象属性：
- event.target ：事件的目标，被删除的节点。
- event.relatedNode ：对目标节点父节点的引用。
DOMNodeRemovedFromDocument 事件对象属性：
- event.target ：事件的目标，被删除的节点。
DOMSubtreeModified 事件对象属性：
- event.target ：事件的目标，被删除的节点的父节点。
注意：
- DOMNodeRemoved 事件触发时，节点尚未从其父节点删除，因此其 patentNode 属性仍然指向父节点（与 event.relatedNode 相同）。
- DOMNodeRemoved 事件会冒泡，而 DOMNodeRemovedFromDocument 事件不会冒泡。
示例：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
<script src="eventUtil.js"></script>
<script src="main.js"></script>
</html>
main.js：
EventUtil.addHandler(window, 'load', function(event) {
var list = document.getElementById('myList');
EventUtil.addHandler(document, 'DOMSubtreeModified', function(event) {
event = EventUtil.getEvent(event);
alert("1:" + event.type);
alert("1:" + event.target);
});
EventUtil.addHandler(document, 'DOMNodeRemoved', function(event) {
event = EventUtil.getEvent(event);
alert("2:" + event.type);
alert("2:" + event.target);
alert("2:" + event.relatedNode);
});
EventUtil.addHandler(list.firstChild, 'DOMNodeRemovedFromDocument', function(event) {
event = EventUtil.getEvent(event);
alert("3:" + event.type);
alert("3:" + event.target);
});
list.parentNode.removeChild(list);
});
在上面的例子中，我们移除了 <ul> 元素，会依次触发以下事件：
- 在 ul 元素上触发 DOMNodeRemoved 事件。
- 在 ul 元素上触发 DOMNodeRemovedFromDocument 事件。
- 在身为 ul 元素子节点的每个 li 元素及文本节点上触发 DOMNodeRemovedFromDocument 事件。
- 在 document.body 上触发 DOMSubtreeModified 事件。
插入节点
在使用 appendChild（ ）、 replace（ ）或 insertBefore（ ）向 DOM 中插入节点时会触发插入节点事件。
触发顺序
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMSubtreeModified
事件对象
DOMNodeInserted 事件对象属性：
- event.target ：事件的目标，被插入（被插入指正在操作的节点，而不是插入之后的父节点）的节点。
- event.relatedNode ：对目标节点父节点的引用。
DOMNodeInsertedIntoDocument 事件对象属性：
- event.target ：事件的目标，被插入的节点。
DOMSubtreeModified 事件对象属性：
- event.target ：事件的目标，新插入节点的父节点。
注意：
- DOMNodeInserted 事件触发时，节点已经插入到了新的父节点中（与删除节点事件不同）。
- DOMNodeInserted 事件会冒泡，而 DOMNodeInsertedIntoDocument 事件不冒泡。