使用纯JavaScript添加，删除属性或更改其值时如何获取事件

Question

I saw similar questions asked few years back but they are not useful to me. I'm repeating somewhat similar question here as there could be new updates.

I want invoke a function when an attribute is added, removed in an element (or its value changed) for all elements in the document. It needs to be working in all browsers at least chrome and mozilla firefox. I want to achieve it purely in javascript.

I tried the following codes

Using event listener. This works in mozilla firefox but not working in chrome.

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

Using observer. It doesn't work and it makes error ( WebKitMutationObserver is not defined ) in error firefox. In chrome it doesn't make any error but it is not listening to event.

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

Finally, I tried the following.

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

Obviously, it worked in all browsers but only when setting the attribute value with setAttribute . Eg: var div = document.createElement('div'); but not with div.style = 'color:green'; . I also want to get event when setting value like div.style = 'color:green'; / div.name = 'somename'; . Is there any way I can achieve this?

Answer 1

WebKitMutationObserver was a temporary "namespaced" thing back before mutation observers were well defined and supported. Now, you just use MutationObserver , which is 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"; 

The above works on Firefox, Chrome, IE11, and Edge.

If for some reason you need to support IE9 or IE10, they had some support for the old "mutation events," and there are shims that use mutation events to provide some of the features of mutation observers for obsolete browsers.

---

I also want to get event when setting value like div.style = 'color:green';

That's not a valid way to set the style attribute, and will not work reliably cross-browser. Either div.style.color = "green"; (which will leave other aspects of style alone), or div.setAttribute("style", "color: green"); (which will wipe out any other inline styles on it), or on at least some browsers, div.style.cssText = "color:green"; (which will also wipe out other inline styles on it).

Answer 2

I think Object.observe() may be useful in your case : http://www.html5rocks.com/en/tutorials/es7/observe/

and implemented similar to the above solution, but Object.observe() not deprecated and part of new webstandards