Question

几年前我看到了类似的问题，但这对我没用。我在这里重复一些类似的问题，因为可能会有新的更新。

我希望在添加属性时调用函数，在文档中的所有元素的元素（或其值已更改）中删除。它需要在所有浏览器中工作至少chrome和mozilla firefox。我想纯粹用javascript实现它。

我尝试了以下代码

使用事件监听器。这适用于mozilla firefox，但不适用于chrome。

document.addEventListener("DOMAttrModified", function(event){
console.log('DOMAttrModified invoked');
console.log(event);
});

使用观察者。它没有工作，它在错误firefox中出错（WebKitMutationObserver is not defined）。在Chrome中，它不会产生任何错误，但它不会收听事件。

var element = document.body, bubbles = false;
var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });

最后，我尝试了以下内容。

Element.prototype.setAttribute = function(name, value) { 
    console.log('attribute modified');
    console.log(this);
    console.log(name);
    console.log(value);
};

显然，它适用于所有浏览器，但仅在使用setAttribute设置属性值时才有效。例如：var div = document.createElement('div');但不包含div.style = 'color:green';。我还希望在设置div.style = 'color:green'; / div.name = 'somename';之类的值时获取活动。有什么方法可以实现这个目标吗？

Answer 1

在突变观察者得到很好的定义和支持之前，

WebKitMutationObserver是一个临时的“命名空间”事物。现在，您只需使用MutationObserver well supported：

var element = document.body, bubbles = false;
var observer = new MutationObserver(function (mutations) {
  console.log(mutations);
});
observer.observe(element, { attributes: true, subtree: bubbles });
document.body.style.color = "green";

以上适用于Firefox，Chrome，IE11和Edge。

如果由于某种原因你需要支持IE9或IE10，他们对旧的“突变事件”有一些支持，并且有使用突变事件的垫片提供突变的一些功能过时浏览器的观察者。

我还想在设置div.style ='color：green';
之类的值时获取事件

这不是设置样式属性的有效方法，并且无法跨浏览器可靠地工作。 div.style.color = "green";（仅留下style的其他方面）或div.setAttribute("style", "color: green");（将消除其中任何其他内联样式）或至少某些浏览器{{1} （这也将消除其他内联样式）。

Answer 2

我认为Object.observe（）在您的情况下可能很有用：http://www.html5rocks.com/en/tutorials/es7/observe/

并实现类似于上述解决方案，但Object.observe（）并未弃用，也是新webstandards的一部分

如何使用纯javascript

2 个答案: