免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

DOM變動事件的用法

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

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

    function getFirstChild(obj){   // 獲取第一子節(jié)點(找到第一個不為空的節(jié)點)        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é)點,即被刪除的節(jié)點            console.log(event.relatedNode); //3:body節(jié)點,即被刪除節(jié)點的父節(jié)點        })        EventUtil.addHandler(getFirstChild(list),"DOMNodeRemovedFromDocument",function(event){            console.log(event.type)         //4:DOMNodeRemovedFromDocument            console.log(event.target)       //5:li節(jié)點，即<li>item1</li>        });        EventUtil.addHandler(document,"DOMSubtreeModified",function(event){            console.log(event.type);        //6:DOMSubtreeModified            console.log(event.target);      //7:body節(jié)點，即被刪除節(jié)點的父節(jié)點        })        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é)點檢測？
??在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節(jié)點的時候：

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

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