JavaScript watch event not working on DOM element objects?

Question

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 can simply do this to bind a callback that will trigger when input field value changes:

var inputDomElement = document.getElementById('someInputElement');
inputDomElement.watch('value',function (id, oldval, newval) {
    alert(oldval);
    alert(newval);
});

But this doesn't work. Simply doesn't trigger. No alert boxes. I've tried it in Firefox 5 and Google Chrome (latest).

Is this not how watch works? Is watch simply doesn't work on DOM elements? I thought that they're simply objects - aren't they?

UPDATE 1:

Here's MDN info about what watch is: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

UPDATE 2:

I cannot use change event. because change only triggers when text element catches blur. Meaning that it'll only trigger when user switches from this textfield to another one. It's not in any way dynamic for when for example checking if this username or email address already taken which I'd like to happen on each distinct change.

Answer 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.

Answer 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);
});

Answer 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/