Suppose I have a given HTML element, such as:
<div id="foo">...</div>
Inside that element, lots of things can happen that will change some display configurations of that element, like its height or fixed position.
Is there anyway I can track any changes related to the display of that element? Is there a general event that gets fired when the element changes any display variable?
Simply use something such as:
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
// Use of the information here.
});
observer.observe(document, {
subtree: true,
attributes: true
//...
});
In the call to MutationObserver you can listen to the events and get the list of elements changed in variable mutations.
In the first argument to observer.observe you can set the elements to listen. In the second argument to the same method you can set what you want to listen.
This code works with Chrome, Firefox and Safari. With the others browsers you can use events, such as 'DOMAttrModified' and 'propertychange', if you want to just see attributes modified, in example.
Good luck.
It looks like you might be referring to mutation events (found at a potentially related question here). As you have probably found, most tracking of changes is centered around input elements.
I have not properly used these before, so I can't offer much about implementation. Hope this helps!
I think that it is impossible to track with events, here is a complete list of events: http://www.quirksmode.org/dom/events/index.html
