is there an alternative to DOMAttrModified that will work in webkit

dom webkit mutation-events
blockhead picture blockhead · Dec 10, 2009 · Viewed 20.4k times · Source

I need to leverage this DOM event. IE has onpropertychange, which does what I need it to do also. Webkit doesn't seem to support this event, however. Is there an alternative I could use?

Answer

filip picture filip · May 5, 2012

Although Chrome does not dispatch DOMAttrModified events, the more lightweighted mutation observers are supported since 2011 and these work for attribute changes, too.

Here is an example for the document body:

var element = document.body, bubbles = false;

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

function attrModified(mutation) {
  var name = mutation.attributeName,
    newValue = mutation.target.getAttribute(name),
    oldValue = mutation.oldValue;

  console.log(name, newValue, oldValue);
}

For a simple attribute change, the console.log statement would print:

<body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>

Console:

> color red black

Related questions

INVALID_STATE_ERR: DOM Exception 11 (WebKit)

I recently tested a Cappuccino app I was working on with Chrome and Safari. I get the error: INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable. The …

Read More
How to clone or re-dispatch DOM events?

I'm looking for a simple and abstract way of cloning or re-dispatching DOM events only. I am not interested in cloning DOM nodes. I've experimented a bit, read the DOM Events specification and I found no clear answer. Ideally, I'm …

Read More
What is the purpose of webkitRelativePath property in File object?

If you printout File object in Chrome console with something simple like this: <input type="file" onchange="console.info(this.files);" /> you will see among other properties an always empty webkitRelativePath property: fileName: "07.png" fileSize: 33022 lastModifiedDate: Date name: "07.…

Read More