監聽元素變化的三種方法：
- 對於表單類型的控件，使用onchange事件最好。
- 使用DOMNodeInserted和DOMNodeRemoved事件
- 使用定時器定時檢測（下策）
有時需要給一個class類型的對象綁定某個事件，對於以后新插入的class類型的元素也要綁定這樣的事件。jQuery中很好的實現了這一功能。實際上，只需要DOMNodeInserted和DOMNodeRemoved兩個事件就可以監聽元素增刪，從而可以在增刪元素之前，為元素綁定事件。
DOMNodeInserted和DOMNodeRemoved兩個事件所對應的方法是瀏覽器自動執行的，執行時機為真正增刪元素之前。
其它的DOM mutation事件：
- DOMAttrModified
- DOMAttributeNameChanged
- DOMCharacterDataModified
- DOMElementNameChanged
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
詳情參考MDN
通過以下demo，操作並查看日志可以更好的理解這兩個事件。
demo解釋：有三個按鈕，第一個按鈕通過更改innerHTML來添加元素，第二個按鈕通過創建元素並插入的方式來添加元素，第三個按鈕用於刪掉最后一個元素觸發DOMNodeRemoved事件。
如果通過innerHTML添加元素，會首先觸發很多次刪除元素的操作，這樣會有較大的創建、銷毀對象開銷，因此對於少量更改，盡量少用innerHTML而是用創建元素的方式。對於大量更改，使用innerHTML更合理。
<html>
<body>
<div id="main">
<button onclick="addOne()">add one by html</button>
<button onclick="add()">add one by element</button>
<button onclick="removeOne()">remove one by element</button>
</main>
</body>
<script>
var main = document.querySelector("#main")
function addOne() {
console.log("add node by html")
main.innerHTML += "<p>haha</p>";
console.log("added node")
}
function add() {
console.log("adding node by element")
var ele = document.createElement('p')
ele.innerHTML = "haha"
main.appendChild(ele)
console.log("added node")
}
function removeOne() {
var sons = main.children
var removing = sons[sons.length - 1]
console.log("removing " + removing.tagName)
if (removing.tagName.toLowerCase() == 'button') {
alert("別再remove了！")
return
}
main.removeChild(removing)
console.log("child removed")
}
document.body.addEventListener("DOMNodeInserted", function () {
console.log('DOMNode inserted')
console.log(arguments)
})
document.body.addEventListener("DOMNodeRemoved", function () {
console.log("DOMNode removed")
console.log(arguments)
})
</script>
</html>