DOM變動(dòng)事件的用法

??DOM2級的変動(dòng)事件是為XML或html的DOM設(shè)計(jì)的，不特定于某種語言。
一：變動(dòng)事件的分類有7種，最常用的瀏覽器支持最多的有3種，下面黑體？
1. DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時(shí)觸發(fā)；
2. DOMNodeInserted：在一個(gè)節(jié)點(diǎn)作為子節(jié)點(diǎn)被插入到另一個(gè)節(jié)點(diǎn)中時(shí)觸發(fā)；
3. DOMNodeRemoved：在節(jié)點(diǎn)從其父節(jié)點(diǎn)中被移除時(shí)觸發(fā)；
4. DOMNodeInsertedIntoDocument：在一個(gè)節(jié)點(diǎn)被直接插入文檔中或者通過子樹間接插入文檔后觸發(fā)。在DOMNodeInserted之后觸發(fā)；
5. DOMNodeRemovedFromDocument：在一個(gè)節(jié)點(diǎn)被直接從文檔中刪除或通過子樹間接從文檔中移除之前觸發(fā)。在DOMNodeRemoved之后觸發(fā)。
6. DOMAttrModified：在特性被修改之后觸發(fā)；
7. DOMCharacterDataModified：在文本節(jié)點(diǎn)的值發(fā)生變化的時(shí)候觸發(fā)。
二：刪除節(jié)點(diǎn)檢測？

• 首先觸發(fā)的是DOMNodeRemoved事件，它對應(yīng)的event對象中的target屬性值是被刪除的節(jié)點(diǎn)，relatedNode屬性值是被刪除節(jié)點(diǎn)的父節(jié)點(diǎn)，該事件會(huì)冒泡；
• 其次出發(fā)的是DOMNodeRemovedFromDocument事件，它對應(yīng)的event對象中的target屬性值為指定的被刪除的子節(jié)點(diǎn)。只有綁定到它的子節(jié)點(diǎn)上才能被觸發(fā)。
• 最后觸發(fā)的是DOMSubtreeModified事件。這個(gè)事件對應(yīng)event對象中的target屬性是被移除節(jié)點(diǎn)的父節(jié)點(diǎn)。
  (下面注釋的序號為觸發(fā)的順序:)

    function getFirstChild(obj){   // 獲取第一子節(jié)點(diǎn)(找到第一個(gè)不為空的節(jié)點(diǎn))
        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節(jié)點(diǎn),即被刪除的節(jié)點(diǎn)
            console.log(event.relatedNode); //3:body節(jié)點(diǎn),即被刪除節(jié)點(diǎn)的父節(jié)點(diǎn)
        })
        EventUtil.addHandler(getFirstChild(list),"DOMNodeRemovedFromDocument",function(event){
            console.log(event.type)         //4:DOMNodeRemovedFromDocument
            console.log(event.target)       //5:li節(jié)點(diǎn)，即<li>item1</li>
        });
        EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
            console.log(event.type);        //6:DOMSubtreeModified
            console.log(event.target);      //7:body節(jié)點(diǎn)，即被刪除節(jié)點(diǎn)的父節(jié)點(diǎn)
        })
        EventUtil.addHandler(btn,'click',function(event){
            list.parentNode.removeChild(list);  //
        })
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

三：插入節(jié)點(diǎn)檢測？
??在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節(jié)點(diǎn)的時(shí)候：

• 首先觸發(fā)DOMInserted事件，它對應(yīng)的event對象中的target屬性為添加的節(jié)點(diǎn)，relateNode屬性對應(yīng)被添加節(jié)點(diǎn)的父節(jié)點(diǎn)。（可冒泡）；
• 其次觸發(fā)的是DOMNodeInsertedIntoDocument事件，它對應(yīng)的event對象中的target屬性是添加的節(jié)點(diǎn)，只有指定給一個(gè)子節(jié)點(diǎn)的事件處理程序才會(huì)被調(diào)用
• 最后出發(fā)的是DOMSubtreeModified事件，它對應(yīng)的event對象長得target屬性值是新節(jié)點(diǎn)的父節(jié)點(diǎn)。
  代碼如下所示：

    function getFirstChild(obj){   // 獲取第一子節(jié)點(diǎn)(找到第一個(gè)不為空的節(jié)點(diǎn))
        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節(jié)點(diǎn)，即被添加的節(jié)點(diǎn)
            console.log(event.relatedNode); //3:ul節(jié)點(diǎn)，即被添加節(jié)點(diǎn)的父節(jié)點(diǎn)
        });
        EventUtil.addHandler(item4,"DOMNodeInsertedIntoDocument",function(event){
            console.log(event.type);        //4:DOMNodeInsertedIntoDocument
            console.log(event.target);      //5:li節(jié)點(diǎn)，即被添加的節(jié)點(diǎn)<li>item4</li>
        });
        EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
            console.log(event.type);        //6:DOMSubtreeModified
            console.log(event.target);      //7:ul節(jié)點(diǎn)，即被觸發(fā)節(jié)點(diǎn)的父節(jié)點(diǎn)
        })
        EventUtil.addHandler(btn,'click',function(){
            item4.appendChild(item4Text);     getFirstChild

            list.replaceChild(item4,getFirstChild(list));
        });
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32