DOM2級的変動事件是爲XML或html的DOM設計的，不特定於某種語言。
一：變動事件的分類有7種，最常用的瀏覽器支持最多的有3種，下面黑體？
1. DOMSubtreeModified：在DOM結構中發生任何變化時觸發；
2. DOMNodeInserted：在一個節點作爲子節點被插入到另一個節點中時觸發；
3. DOMNodeRemoved：在節點從其父節點中被移除時觸發；
4. DOMNodeInsertedIntoDocument：在一個節點被直接插入文檔中或者通過子樹間接插入文檔後觸發。在DOMNodeInserted之後觸發；
5. DOMNodeRemovedFromDocument：在一個節點被直接從文檔中刪除或通過子樹間接從文檔中移除之前觸發。在DOMNodeRemoved之後觸發。
6. DOMAttrModified：在特性被修改之後觸發；
7. DOMCharacterDataModified：在文本節點的值發生變化的時候觸發。
二：刪除節點檢測？
首先觸發的是DOMNodeRemoved事件，它對應的event對象中的target屬性值是被刪除的節點，relatedNode屬性值是被刪除節點的父節點，該事件會冒泡；
其次出發的是DOMNodeRemovedFromDocument事件，它對應的event對象中的target屬性值爲指定的被刪除的子節點。只有綁定到它的子節點上才能被觸發。
最後觸發的是DOMSubtreeModified事件。這個事件對應event對象中的target屬性是被移除節點的父節點。
(下面註釋的序號爲觸發的順序:)
function getFirstChild(obj){ // 獲取第一子節點(找到第一個不爲空的節點)
var first = obj.firstChild;
while(first.nodeType != 1){
first = first.nextSibling;
}
return first;
}
EventUtil.addHandler(window,"load",function(event){
var list = document.getElementById('myList');
var btn = document.getElementById("mbtn");
EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
console.log(event.type); //1:DOMNodeRemoved
console.log(event.target); //2:ul節點,即被刪除的節點
console.log(event.relatedNode); //3:body節點,即被刪除節點的父節點
})
EventUtil.addHandler(getFirstChild(list),"DOMNodeRemovedFromDocument",function(event){
console.log(event.type) //4:DOMNodeRemovedFromDocument
console.log(event.target) //5:li節點，即<li>item1</li>
});
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(event.type); //6:DOMSubtreeModified
console.log(event.target); //7:body節點，即被刪除節點的父節點
})
EventUtil.addHandler(btn,'click',function(event){
list.parentNode.removeChild(list); //
})
})
三：插入節點檢測？
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節點的時候：
首先觸發DOMInserted事件，它對應的event對象中的target屬性爲添加的節點，relateNode屬性對應被添加節點的父節點。（可冒泡）；
其次觸發的是DOMNodeInsertedIntoDocument事件，它對應的event對象中的target屬性是添加的節點，只有指定給一個子節點的事件處理程序纔會被調用
最後出發的是DOMSubtreeModified事件，它對應的event對象長得target屬性值是新節點的父節點。
代碼如下所示：
function getFirstChild(obj){ // 獲取第一子節點(找到第一個不爲空的節點)
var first = obj.firstChild;
while(first.nodeType != 1){
first = first.nextSibling;
}
return first;
}
EventUtil.addHandler(window,"load",function(event){
var list = document.getElementById('myList');
var btn = document.getElementById("mbtn");
var item4 = document.createElement('li');
var item4Text = document.createTextNode('item4');
EventUtil.addHandler(document,"DOMNodeInserted",function(event){
console.log(event.type); //1:DOMNodeInserted
console.log(event.target); //2:li節點，即被添加的節點
console.log(event.relatedNode); //3:ul節點，即被添加節點的父節點
});
EventUtil.addHandler(item4,"DOMNodeInsertedIntoDocument",function(event){
console.log(event.type); //4:DOMNodeInsertedIntoDocument
console.log(event.target); //5:li節點，即被添加的節點<li>item4</li>
});
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(event.type); //6:DOMSubtreeModified
console.log(event.target); //7:ul節點，即被觸發節點的父節點
})
EventUtil.addHandler(btn,'click',function(){
item4.appendChild(item4Text); getFirstChild
list.replaceChild(item4,getFirstChild(list));
});
})
————————————————
版權聲明：本文爲CSDN博主「flyingpig2016」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/flyingpig2016/article/details/53677679