Javascript: Check if Element has Changed

As far as I understand you want onChange on javascript object Properties. The answer is no, it doesn't exist as far as I know.

But you can make a setter function like this (As a proof of concept):

var element = {};

element.setProperty = function(property, value) {
  if (typeof(element.onChange) === 'function') {
    element.onChange(property, element[property], value);
  }

  element[property] = value;
};



element.onChange = function(property, oldValue, newValue) {
  alert(property + ' changed from ' + oldValue + ' to ' + newValue);
};

element.setProperty('something', 'Hello world!');

now you get an alert box with 'something changed from undefined to Hello World!'. And (element.something === 'Hello World!') will return true.

if you now call:

element.setProperty('something', 'Goodbye world!');

you get an alert box with 'something changed from Hello World! to Goodbye World!'.

Off course you have to set the property only via the setProperty method in all of your code if you want to capture this event!

Edit:

At some time in the future, you might be able to use Object.observe().

Edit 2:

Now there's also proxies.


I guess you'd need a way to capture the event which triggered the change in attribute rather than the change in attribute. The change in attribute could only either be due to your CSS or your javascript, both being manifestations of the user's actions.