Question

是否有（好的）方法来跟踪HTML元素的所有更改？

我尝试将javascript与jQuery一起使用，但它不起作用。

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

不知何故，在提交按钮上设置了一个样式属性，但我无法找到它的执行位置和方式。

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答案非常好并且是最新的（我希望）。

有没有办法跟踪HTML元素的所有更改？

3 个答案: