JavaScript變動事件詳解（刪除節點與插入節點事件）
阿新 • • 發佈：2018-12-15
變動事件
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 事件不冒泡。