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分支似乎沒有周期性超時（未經測試）。