DOM中监听节点变化的事件(变动事件)的用法

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

三：插入节点检测？
  在使用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));
        });
    })
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