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迁移时,并不能单纯的替换掉事件监听的元素。