Javascript: Check if Element has Changed

Question

I want to know, if it's possible, how to check in javascript if an element has changed or an attribute of it?

I mean something like window.onhashchange for an element something like:

document.getElementById("element").onElementChange = function();

As I know onchange is something like this, but will it work if I want to know in this way:

var element = {};
element.attribute = result;

element.attribute.onchange = function();

Answer 1

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.

Answer 2

You might consider a mutation observer.

to do this you first create a callback (fired when the dom element changes)

assign it to an observer var observer = new MutationObserver(callback);

Then tell the observer what to watch observer.observe('<div></div>', observerOptions);

From: Mozilla page on Mutation Observers

Answer 3

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.

Answer 4

I believe there is no such event. However, you can use setInterval or setTimeout to watch for element changes and use it to react accordingly.

Answer 5

I did this. It works pretty well. I would have used the setProperty method if I had known.

function searchArray(searchValue, theArray, ChangeValue){
    for (var i=0; i < theArray.length; i++) {
        if (theArray[i].id === searchValue) {
            theArray[i].changed = ChangeValue;
        }
    }
}

function getArrayIindex(elementid, theArray){
    for (var i=0; i < theArray.length; i++) {
        if (theArray[i].id === elementid) {
            return i;
        }
    }
}

function setInputEvents(hiddenObject) {

        var element;

        for (var i = 0; i < document.forms[0].length; i++) {
            element = document.forms[0].elements[i];

            //Check to see if the element is of type input
            if (element.type in { text: 1, password: 1, textarea: 1 }) {

                arrFieldList.push({
                    id: element.id,
                    changed:false,
                    index: i,                    
                });

                element.onfocus = function () {
                    if (!arrFieldList[getArrayIindex(this.id, arrFieldList)].changed) {
                        hiddenObject.value = this.value;
                        this.value = '';
                    }
                }

                element.onblur = function () {
                    if (this.value == '') {
                        this.value = hiddenObject.value;
                    }
                }

                element.onchange = function () {
                    searchArray(this.id, arrFieldList, true);
                }
            }

        }