判定元素正在插入到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开始动画事件来监听节点的插入。

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

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

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