當我們在寫Web時，常常會不知覺的用了許多 API 來幫助我們開發，像是上篇的「[jQuery] Global Ajax Event Handlers」也是其中一種。
然而我們常常會使用這些功能，卻不清楚其來由，懵懵懂懂的很容易會有一些錯誤觀念或者錯誤的使用方法，及「知其然，而不知其所以然」的現象，因此在日後的文章有機會會在特別詳述原理的部分。
今天要介紹的是 MutationObserver 不是 MutationEvents ，兩者都是在監聽 DOM 有被異動時，需要做一些相對應的事情；
換而言之，就是當網頁上有新的「按鈕」、「TextBox」、「標籤」...等物件被生成或異動時，我們可以透過 MutationObserver 來做進一步的操作。MutationEvents 因為效能上的考量，已經在DOM3被淘汰了，請不要再繼續使用！
MutationObserver 是 DOM4 提出來取代 MutationEvents，當然就是解決了效能上的問題，其原理是當DOM物件被異動時，會先複製一份DOM 且 Queue住，接著會通知 MutationObserver 有哪些 DOM 在被異動中，接著 Developer 就可以做一些相對應的事情，像是初始化、套css...等。
當然，其實我們不用了解那麼多也是可以使用的，如下範例是從Blog修改而來：
// 要監控的目標
var target = document.querySelector('#some-id');
// new MutationObserver
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// 參數：決定要監控哪些物件
var config = { attributes: true, childList: true, characterData: true }
// 跟 MutationObserver 指定要監控的目標與參數
observer.observe(target, config);
// 停止監控
observer.disconnect();
參考：