JavaScript Watch Event Not Working On DOM Element Objects?

I know I can use watch to bind a callback that will be triggered when object property changes. And this does work on generic objects like: {'a':1, 'b':'7'} So, I thought that I ca

Solution 1:

The DOM is written in C/C++ where the concept of getting and setting a Javascript variable doesn't exist as you or I would often imagine it. You probably imagined the code to be implemented similar to what is below. Unfortunately Object.watch is never initiated because the DOM isn't constantly updating the Javascipt value, but Javascript is requesting an update from the DOM.

input.onuserchangevalue = function(){
   input.value = 'new user input'
}

Thinking how the DOM commonly works, each element has dozens of potential properties.

• innerHTML,value,style.cssText,name,id,style.background,style.backgroundColor

Imagine if the DOM underlining code had to constantly update every DOM elements Javascript properties %) Memory and CPU cycles would go through the roof having to ensure the properties matched the display value. The DOM's internals would also have to check if the Javascript value has potentially changed.

Reality - Red Pill

Basically the DOM isn't giving info to javascript, but Javascript is requesting the info from the DOM. This is a decent Javascript interpretation of what is going on underneath.

Object.defineProperty(input, "value", {
    get : function(){ /* get C/C++ DOM value */ },
    set : function(){ /* change C/C++ DOM value */ }
   });

This explains why the DOM is often the bottleneck for Javascript. Javascript has to request/set the internal DOM values every time you interface with the DOM.

Solution 2:

You need to use jQuery Objects, not DOM Objects. There is a difference.

document.getElementById("someID") //returns DOM Object

$('#someId')  //returns jQuery Object

Note: you could doe something strange like this:

$(document.getElementById("someID"))  //returns a jQuery Object

this would work

$('#someInputElement').watch('value',function (id, oldval, newval) {
    alert(oldval);
    alert(newval);
});

Solution 3:

if you want to track changes on a text element, why not just use the .change() method?

http://jsfiddle.net/rkw79/qTTsH/

$('input').change(function(e) {
    $('div').html('old value: ' + e.target.defaultValue + '<br/>'
                  + 'new value: ' + e.target.value);
})

For instant change, use .keyup(): http://jsfiddle.net/rkw79/qTTsH/1/