Question

JQuery中是否有任何DOM突变事件或者是跨浏览器的vanilla Javascript？

为了澄清，我说我的页面上有一个脚本，它将div插入到正文中。我无法访问脚本，我不知道何时插入了div。我想知道是否有一个DOM突变事件，我可以添加一个监听器，以了解何时插入了一个元素。我知道我可以使用计时器来定期检查插入，但是，我真的不喜欢这会带来的开销。

Answer 1

这肯定是一个黑客，但为什么不修补用于插入节点的底层DOM方法？有几种方法可以做到这一点：

<强> A 即可。您知道将特定元素附加到：

var c = document.getElementById('#container');
c.__appendChild = c.appendChild;
c.appendChild = function(){
     alert('new item added');
     c.__appendChild.apply(c, arguments); 
}

fiddle demo for A

<强>乙即可。您知道将类型元素附加到：

HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild;
HTMLDivElement.prototype.appendChild = function(){
    alert('new item added');
    HTMLDivElement.prototype.__appendChild(this,arguments); 
}

fiddle demo for B

（请注意，IE < 8或任何其他不支持DOM原型的浏览器不支持解决方案 B 。）

同样的技术可以很容易地用于所有底层DOM变异函数，例如insertBefore，replaceChild或removeChild。

这是一般的想法，这些演示可以适用于几乎任何其他用例 - 比如你想要投射一个宽网并捕捉所有添加，无论类型 AND 确保它可以在除<{1}}之外的所有浏览器中运行吗？（见下面的例子C）

<强>更新

C。递归遍历DOM，在每个元素上交换函数以触发回调，然后将相同的补丁应用于任何正在追加的子项。

IE < 8

fiddle demo for C

更新2

在Tim Down评论时，上述解决方案也无法在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>');中使用，因为IE < 8不是appendChild且不支持Function或{ {1}}。我想如果call，你可以随时回到笨重但可靠的apply方法。

Answer 2

在Chrome 14和IE9中，有一些已弃用的 DOM突变事件，例如DOMNodeInserted和DOMNodeInsertedIntoDocument仍适用于我。

请参阅http://jsfiddle.net/Kai/WTJq6/

上的示例

在http://www.w3.org/TR/DOM-Level-3-Events/

的W3C草案中查看所有内容

Answer 3

JCADE（JQuery创建和销毁事件）将执行此操作。它对IE使用行为，对其他浏览器使用 DOM突变事件。它不使用计时事件，也不包括像livequery这样的JQuery方法。

https://github.com/snesin/jcade


    $( document ).create( "a", function( event ) {
      alert( event.target );
    });

Answer 4

我相信，不是没有插件，但如果我错了，我不会感到惊讶。

我的研究发现了一些可供选择的。

这是一个：http://plugins.jquery.com/project/mutation-events

这是另一个：https://www.adaptavist.com/display/jQuery/Mutation+Events

Answer 5

如果您正在寻找这种方法的替代方法，这里有http://www.jqui.net/jquery-projects/jquery-mutate-official/，它还允许您自己添加事件并密切关注任何更改，类名更改，高度更改，宽度更改。< / p>

Answer 6

可以使用livequery插件。在版本1.x中，使用计时器定期检查是否有任何更改。但是，较新版本的2.x分支似乎没有定期超时（未经测试）。

JQuery或vanilla Javascript中的DOM Mutation事件

6 个答案: