JQuery或vanilla Javascript中的DOM Mutation事件

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); 
}

A的小提琴演示

B。 您知道将附加什么类型的元素：

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

B的小提琴演示

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

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

这是一般的想法，这些演示可以适用于几乎任何其他用例 - 比如你想要投射一个宽网并捕获所有添加物，无论类型和确保它适用于所有浏览器除了IE < 8 所有东西？ （见下面的例子C）

---

UPDATE

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

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评论的那样，上述解决方案在IE < 8也不起作用，因为appendChild不是一个Function ，不支持call或apply 。 如果typeof document.body.appendChild !== 'function'我想你总是可以回到笨重而可靠的setInterval方法。

Answer 2

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

请参阅http://jsfiddle.net/Kai/WTJq6/上的示例

请参阅W3C草案中的所有内容， 网址为http://www.w3.org/TR/DOM-Level-3-Events/

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/ ，它还可以让您自己添加事件并随时关注任何更改，班级名称变更，身高变化，宽度变化。

Answer 6

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