判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

在firefox, webkit中我们可以使用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>

var WeakMap = WeakMap || function(){ /*!(C) WebReflection - Mit Style !*/ // WARNING: DO NOT FORGET TO DELETE KEYS WHEN POSSIBLE // MEMORY GREEDY, UNSAFE, BROKEN SHIM var w = [].indexOf || function(v){ for(i=this.length;i--&&this[i]!==v;);return i}, i, k, v; function c(){ k = []; v = []; } function h(o) { return -1 < (i = w.call(k, o)); } return { clear: c() || c, 'delete': function(o){ return !(h(o) ? (k.splice(i, 1), v.splice(i, 1), 0) : 1); }, get: function(o){ return v[w.call(k, o)]; }, has: h, set: function(o, d){ v[h(o) ? i : k.push(o) - 1] = d; } }; };

再看一下它的替代品MutationObserver，发现这厮不支持这功能，它只能监听自身或其后代的变化。因此还是用CSS方法或animationstart，IE6-9只能setInterval了！

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

posted on 2013-07-15 21:24  司徒正美  阅读(5081)  评论(1)  编辑  收藏  举报

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码