斷定元素正在插入到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開始動畫事件來監聽節點的插入。

	<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>
	
 
 
 
 

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  司徒正美  閱讀(3291)  評論(1)  編輯  收藏