JavaScript高级程序设计–DMO节点变化

最新推荐文章于 2022-04-18 18:45:40 发布

小王同学1990

最新推荐文章于 2022-04-18 18:45:40 发布

阅读量360

点赞数

分类专栏： js-实战

本文链接：https://blog.csdn.net/Wxiaolin/article/details/78360671

版权

js-实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

mutation事件能在DOM中的某一部分发生变化时给出提示
检测浏览器是否支持（ie9+）;var isSupported = document.implementation.hasFeature(‘MutationEvents’,’2.0’);

事件名称
DOMSubtreeModified:在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
DOMNodeRemoved:在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发
DOMAttrModified：在特性被修改之后触发
DOMCharacterDataModify：在文本节点的值发生变化时触发。
-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="myList">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<script>
var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler); 
        }else{
            element["on"+type] = handler
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.detachEvent("on"+type,handler); 
        }else{
            element["on"+type] = null
        }
    },
    getEvent:function(event){
        return event ? event:window.event;
    },
    getTarget:function(event){
        return event.target || window.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    getButton:function(event){
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button
        }else{
            switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
            }
        }
    }
}
//DOMSubtreeModified:在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发
//DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
//DOMNodeRemoved:在节点从其父节点中被移除时触发。
//DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
//DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发
//DOMAttrModified：在特性被修改之后触发
//DOMCharacterDataModify：在文本节点的值发生变化时触发。
//检查浏览器是否支持MutationEvents


//删除节点
/*
var isSupported = document.implementation.hasFeature('MutationEvents','2.0');

EventUtil.addHandler(window,"load",function(){
    var list = document.getElementById("myList");

    EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
        console.log(event.type);//步骤6：DOMSubtreeModified
        console.log(event.target);//步骤7：<body>
    });
    EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
        console.log(event.type); //步骤1：DOMNodeRemoved
        console.log(event.target); //步骤2：<ulid="myList"><li>item1</li><li>item2</li><li>item3</li></ul>
        console.log(event.relatedNode);//步骤3：body
    });
    EventUtil.addHandler(list.firstChild,"DOMNodeRemovedFromDocument",function(event){
        console.log(event.type);//步骤4：DOMNodeRemovedFromDocument
        console.log(event.target);//步骤5：#text
    });
    list.parentNode.removeChild(list);
})
*/
//插入节点
EventUtil.addHandler(window,"load",function(event){
    var list = document.getElementById("myList");
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Item 4"));

    EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
        console.log(event.type);//步骤6：DOMSubtreeModified
        console.log(event.target);//步骤7：<ulid="myList"><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul>
    })
    EventUtil.addHandler(document,"DOMNodeInserted",function(event){
        console.log(event.type); //步骤1：DOMNodeInserted
        console.log(event.target);//步骤2：<li>Item 4</li>
        console.log(event.relatedNode);//步骤3：<ulid="myList"><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul>
    })
    EventUtil.addHandler(item,"DOMNodeInsertedIntoDocument",function(event){
        console.log(event.type);//步骤4：DOMNodeInsertedIntoDocument
        console.log(event.target);//步骤5：<li>Item 4</li>
    })

    list.appendChild(item)
})


</script>
</body>
</html>