DOM變動事件的用法


  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));
        });
    })