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
加支付宝好友偷能量挖...
