Javascript ChangeListener ( IE only )

Bij het gebruik van AJAX voor het vullen van DOM objecten met data, is het vaak handig om genotificeerd te worden op het moment dat de content van een DOM object gewijzigd is. Aan de hand van deze wijziging kunnen er dan weer andere functies afgaan die iets met de gewijzigde data kunnen doen.

Standaard is het bovenstaande niet mogelijk omdat er geen event afgaat op het DOM object op het moment dat de content wijzigt.

Voor dit doel heb ik een ChangeListener geschreven die van alle geregistreerde DOM objecten monitored of de content gewijzigd is. Als dit zo is dan word een callBack functie aangeroepen die het event kan afhandelen:


/**************************************************************************************************
Implemented a custom change event listener.
Reason for this is that on change of the content of the HTMLResults we have to act.
Action is doing an investigation of the html and if there is a script tag, evaluate the inside of the script.
This enables us to mimic a dbLookup in a view.
ChangeListener is generic, and just needs registering DOM objects with a callback function
***************************************************************************************************/
var ChangeListener =
{
registered: [],
register: function(objDom,callback)
{
objDom.contentlength = objDom.innerHTML.length;
objDom.checkchange = function()
{
if(this.contentlength!=this.innerHTML.length){
this.contentlength=this.innerHTML.length;
ChangeListener.notify(this);
}
};
var element ={
obj: objDom,
callback: callback
};
this.registered.push( element);
},
monitor: function()
{
var loop = setInterval( function()
{
for(var i=0;iChangeListener.registered[i].obj.checkchange();
}
},10);
},
notify: function(obj)
{
for(var i=0;ithis.registered[i].callback(this.registered[i].obj);
}
}
}
};
//start monitoring changes
ChangeListener.monitor();