javascript动态插入,修改,删除DOM对象触发的事件

  javascript动态插入,修改,删除DOM对象时会触发哪些事件?

  在firefox, webkit中可以使用DOMNodeInsertedIntoDocument事件监听DOM对象的插入事件,但这个事件很快要废弃了,虽然浏览器还是很有节操地支持它们,但哪一天不再支持DOMNodeInsertedIntoDocument事件也很难说。比如说firefox22已经不支持了,IE则始终不支持此事件。

  这里有个脚本,可以判定浏览器是否支持变动事件

var mutations = (function (document) {
    // (C) WebReflection - Mit Style License
    var
        type = [
            "DOMSubtreeModified",
            "DOMNodeInserted",
            "DOMNodeRemoved",
            "DOMNodeRemovedFromDocument",
            "DOMNodeInsertedIntoDocument",
            "DOMAttrModified",
            "DOMCharacterDataModified"
        ],
        documentElement = document.documentElement,
        method = "EventListener",
        data = "deleteData",
        p = document.createElement("p"),
        mutations = {},
        i
    ;
    function check(addOrRemove) {
        for (i = type.length; i--;) {
            p[addOrRemove](type[i], cb, false);
            documentElement[addOrRemove](type[i], cb, false);
        }
    }
    function cb(e) {
        mutations[e.type] = true;
    }
    check("add" + method);
    documentElement.insertBefore(
        p,
        documentElement.lastChild
    );
    p.setAttribute("i", i);
    p = p.appendChild(document.createTextNode(i));
    data in p && p[data](0, 1);
    documentElement.removeChild(p = p.parentNode);
    check("remove" + method);
    return (p = mutations);
}(document));
 

  在《Detect DOM Node Insertions with JavaScript and CSS Animations》这篇文章中,作者提供了一个方法,教我们利用keyframe CSS3开始动画事件来监听节点的插入。

<style>
        
        /* set up the keyframes */
        @keyframes nodeInserted { 
            from { clip: rect(1px, auto, auto, auto); }
            to { clip: rect(0px, auto, auto, auto); } 
        }
        @-moz-keyframes nodeInserted { 
            from { clip: rect(1px, auto, auto, auto); }
            to { clip: rect(0px, auto, auto, auto); }
        }
        @-webkit-keyframes nodeInserted { 
            from { clip: rect(1px, auto, auto, auto); }
            to { clip: rect(0px, auto, auto, auto); }
        }
        @-ms-keyframes nodeInserted { 
            from { clip: rect(1px, auto, auto, auto); }
            to { clip: rect(0px, auto, auto, auto); }
        }
        @-o-keyframes nodeInserted { 
            from { clip: rect(1px, auto, auto, auto); }
            to { clip: rect(0px, auto, auto, auto); }
        }
        #parentElement > li {
            padding: 10px;
            background: #FF6A6A;
            margin-bottom: 10px;
            animation-duration: 0.001s;
            -o-animation-duration: 0.001s;
            -ms-animation-duration: 0.001s;
            -moz-animation-duration: 0.001s;
            -webkit-animation-duration: 0.001s;
            animation-name: nodeInserted;
            -o-animation-name: nodeInserted;
            -ms-animation-name: nodeInserted;       
            -moz-animation-name: nodeInserted;
            -webkit-animation-name: nodeInserted;
        }
        
    </style>
    <script>
        window.onload = function() {
            
            var count = 0,
                insertListener = function(event){
                    console.warn("Another node has been inserted! ", event);
                    if (event.animationName == "nodeInserted") {
                        event.target.textContent = "Element " + count++ + " has been injected!";
                    }
                }
            document.addEventListener("animationstart", insertListener, false); // standard + firefox
            document.addEventListener("MSAnimationStart", insertListener, false); // IE
            document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
            // Insert a new element
            setInterval(function(){
                document.getElementById("parentElement").appendChild(document.createElement("li"))
            }, 2000);
            
        };
    </script>
    <ul id="parentElement"></ul>

来源:http://www.cnblogs.com/rubylouvre/p/3192021.html

评论(0)网络
阅读(188)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧