DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

var oDiv = document.createElement("div");
oDiv.className = "oDiv";
var p = document.createElement("p");
p.className = "p";
var h1 = document.createElement("h1");
h1.className = "h1";

oDiv.addEventListener("DOMNodeInsertedIntoDocument",function(e){
	console.log("add");
});
oDiv.addEventListener("DOMNodeRemovedFromDocument",function(e){
	console.log("remove");
});

p.addEventListener("DOMNodeRemovedFromDocument",function(e){
	console.log("remove");
});
p.addEventListener("DOMNodeInsertedIntoDocument",function(e){
	console.log("add");
});

document.body.appendChild(oDiv);//add oDiv
oDiv.appendChild(p);//add p
oDiv.innerHTML = "";//remove p
oDiv.appendChild(h1);//

由以上结果可以发现，添加元素和删除元素时触发的是此元素绑定的事件

无论使用事件还是MutationObserve，在把元素插入到父元素之前都需要先进行监听再绑定处理函数

var supportMutationObserver =  window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
supportMutationObserver = !!supportMutationObserver;
var mo = new MutationObserver(function(mutations){
	mutations.forEach(function(mutation){
		console.log(mutation.target);
		if(mutation.addedNodes.length > 0){
			console.log("add nodes");
		}
		if(mutation.removedNodes.length > 0){
			console.log("remove nodes");
		}
	})
});

一、mo.observe(document.body,{childList:true, subtree: true});

document.body.appendChild(oDiv);//add nodes  如果oDiv不添加到body，oDiv子元素的添加和删除不能监听
oDiv.appendChild(p);//add nodes
oDiv.innerHTML = "";//remove nodes
oDiv.appendChild(h1);//add nodes

二、mo.observe(oDiv,{childList:true, subtree: true});
document.body.appendChild(oDiv); //oDiv添加到body，oDiv子元素的添加和删除可以收到监听
oDiv.appendChild(p);//add nodes
oDiv.innerHTML = "";//remove nodes
oDiv.appendChild(h1);//add nodes

在截图中（一）和（二）中可以发现MutationObserve监听的元素为目标元素的子元素，mutation.target为添加和删除的元素的父元素。

所以在由DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument向MutationObserver迁移时，并不能单纯的替换掉事件监听的元素。