有沒有辦法跟蹤HTML元素的所有更改？

Question

有沒有一種（好）的方式來跟蹤對HTML元素的所有更改？

我試圖用JavaScript與jQuery，但它不起作用。

$('div.formSubmitButton input[type="submit"]').change(function(event){ 
       alert(event); 
      }); 

不知何故style屬性設置在提交按鈕上，但我找不到在哪裏以及如何完成。

Answer 1

您可以通過使用mutationobservers跟蹤做一個DOM元素的變化：

// select the target node 
var target = document.querySelector('div.formSubmitButton input[type="submit"]'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true } 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

http://jsfiddle.net/2VwLa/

這會給你什麼改變細節MutationRecord對象。有關突變的更多信息：https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Answer 2

您可以跟蹤在輸入欄上的變化或檢查提交：

$('form').submit(function(event){ 
    alert("this gets called when form submitted here you can test differences"); 
    }); 


    $('form input[type="text"]').change(function(event){ 
    alert("this gets called when and text input field gets changed"); 
    }); 

進一步，你可以檢查鍵盤輸入一個特定的輸入字段：

$('form input[type="text"]').keydown(function(event){ 
    alert("this gets called on key board input before the data is inserted in input field"); 
    }); 

    $('form input[type="text"]').keyup(function(event){ 
    alert("this gets called on key board input after the data is inserted in input field"); 
    }); 

注：type="text"是隻有一個例子，你可能也希望你的密碼和電子郵件字段包含在內。 （和選擇框，如果你使用變化事件）

Answer 3

好吧，我發現這個問題，Detect element content changes with jQuery答案是相當不錯，並且是最新的（我希望）。