JQuery或香草JavaScript中的DOM突变事件
有没有在JQuery或香草JavaScript中的跨浏览器的任何DOM突变事件？
为了澄清，说我在我的网页上插入一个div的脚本。 我没有访问脚本，我不知道什么时候插入div。 我想知道是否有一个DOM突变事件，我可以添加一个监听器，知道什么时候插入一个元素。 我知道我可以使用一个计时器来定期检查插入，但是，我不太喜欢这会施加的开销。
这当然是一个黑客，但为什么不修补用于插入节点的底层DOM方法？ 有几个方法可以做到这一点：
A。 你知道什么特定的元素将被追加到：
var c = document.getElementById('#container'); c.__appendChild = c.appendChild; c.appendChild = function(){ alert('new item added'); c.__appendChild.apply(c, arguments); } A的小提琴演示
B。 你知道什么types的元素将被追加到：
HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild; HTMLDivElement.prototype.appendChild = function(){ alert('new item added'); HTMLDivElement.prototype.__appendChild(this,arguments); }
B的小提琴演示
（请注意，解决schemeB不支持IE < 8或任何其他不支持DOM原型的浏览器。）
相同的技术可以很容易地用于所有基本的DOM突变函数，如insertBefore ， replaceChild或removeChild 。
这是一般的想法，这些演示可以适应几乎任何其他用例 – 说你想投一个广泛的networking，并捕获所有添加，无论types，并确保它适用于所有浏览器的一切，但IE < 8 ？ （见下面的例子C）
UPDATE
C.recursion地走DOM，换掉每个元素上的函数来触发一个callback，然后将相同的补丁应用到被追加的任何子节点上。
var DOMwatcher = function(root, callback){ var __appendChild = document.body.appendChild; var patch = function(node){ if(typeof node.appendChild !== 'undefined' && node.nodeName !== '#text'){ node.appendChild = function(incomingNode){ callback(node, incomingNode); patch(incomingNode); walk(incomingNode); __appendChild.call(node, incomingNode); }; } walk(node); }; var walk = function(node){ var i = node.childNodes.length; while(i--){ patch(node.childNodes[i]); } }; patch(root); }; DOMwatcher(document.body, function(targetElement, newElement){ alert('append detected'); }); $('#container ul li').first().append('<div><p>hi</p></div>'); $('#container ul li div p').append('<a href="#foo">bar</a>');
C的小提琴演示
更新2
正如Tim Down所评论的，上述解决scheme在IE < 8也不起作用，因为appendChild不是Function ，不支持call或apply 。 我想你总是可以回到笨重但值得信赖的setInterval方法，如果typeof document.body.appendChild !== 'function' 。
有一些不推荐使用的 DOM突变事件，比如DOMNodeInserted和DOMNodeInsertedIntoDocument ，它们在Chrome 14和IE9中仍然适用于我。
在http://jsfiddle.net/Kai/WTJq6/看到一个例子;
请参阅W3C草案的全部内容： http://www.w3.org/TR/DOM-Level-3-Events/
JCADE（JQuery创build和销毁事件）将做到这一点。 它为其他浏览器使用IE和DOM突变事件的 行为 。 它不使用计时事件，也不包装像查询这样的JQuery方法。
https://github.com/snesin/jcade
$（document）.create（“a”，function（event）{
alert（event.target）;
}）;
我相信，不是没有插件，但如果我错了，我不会感到惊讶。
我的研究发现了一些select。
这里有一个： http : //plugins.jquery.com/project/mutation-events
这是另一个： https ： //www.adaptavist.com/display/jQuery/Mutation+Events
如果你正在寻找这种方法的替代方法，这里是http://www.jqui.net/jquery-projects/jquery-mutate- official /这也可以让你自己添加事件，并保持几乎任何变化，class级名称更改，高度更改，宽度更改。
livequery插件可以用于这个。 在版本1.xa中，定时器用于定期检查是否有任何更改。 然而，较新的版本2.x分支似乎没有定期超时（未经testing）。
