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:

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.

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

• javascript
• jquery
• dom

• The banner at the top of the MDN page has "Non-standard" in yellow. May account for why it doesn't work. – Alastair Pitts Commented Aug 5, 2011 at 3:22
• 2 It does work in all modern browsers: Firefox 3+, Google Chrome, IE 9+, SAFARI v. 4+. Also - I do mention in my question that I've tried it in supporting browser. – Stann Commented Aug 5, 2011 at 3:23
• 5 Please refrain from continuing to update your original question with "Still waiting" changes. Not having an accepted answer implies that you are looking for the right answer. You do not need to continue "bumping" your question. – Alastair Pitts Commented Aug 5, 2011 at 3:26

3 Answers 3

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

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

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

http://jsfiddle/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/rkw79/qTTsH/1/