Is there any onDocumentChange event?

Question

Is there any event in Internet Explorer, that is fired whenever DOM is changed? For example:

document.attachEvent(\"ondocumentchange\", function () {
    ale         


        

Answer 1

Off the top of my head, this might work:

document.body.attachEvent('onpropertychange', function(event) {
  if (event.propertyName !== 'innerHTML') return;
  alert("you've just changed DOM!");
});

This relies on IE's proprietary [onPropertyChange event](http://msdn.microsoft.com/en-us/library/ms536956(VS.85).aspx) — since the document's innerHTML would change whenever a node is inserted. But:

1. It might not work with certain types of properties. I imagine innerHTML would function like a "getter" in that it'd only get recalculated when retrieved.

2. It would also pick up a lot of false positives — lots of other things would modify the innerHTML that would have nothing to do with node insertion. You could mitigate this by listening on a particular element, rather than document-wide.

Answer 2

You want to look at dom mutation events - see http://en.wikipedia.org/wiki/DOM_Events, and scroll down to the section on mutation events. Only problem is that support for these events is pretty sketchy, so be careful using them. Notably, a lack of support at all in IE or Opera. Firefox, Safari and Chrome seem to be the only ones.

Something like:

document.addEventListener("DOMSubtreeModified", function () {
    alert("you've just changed DOM!");
});

According to http://www.quirksmode.org/dom/events/index.html for these kind of events you need to use addEventListener, not attachEvent. The event apparently bubbles, so that should be fine.

Answer 3

Brute-force "solution":

(function (previousInnerHTML) {
    return function () {
        if (document.body.innerHTML !== previousInnerHTML) {
            alert("you've just (at max 33ms ago) changed DOM");
        }
        setTimout(arguments.callee, 33);
    };
})(document.body.innerHTML)();