Событие наблюдения JavaScript не работает на объектах DOM-элементов?

Question

Я знаю, что могу использовать watch для привязки обратного вызова, который будет срабатывать при изменении свойства объекта.И это действительно работает с общими объектами, такими как:

{'a':1, 'b':'7'}

Итак, я подумал, что я могу просто сделать это, чтобы привязать обратный вызов, который сработает при изменении значения поля ввода:

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

Но это не работает.Просто не срабатывает.Нет предупреждений.Я пробовал это в Firefox 5 и Google Chrome (последняя версия).

Разве это не так, как watch работает? watch просто не работает на элементах DOM?Я думал, что они просто объекты - не так ли?

ОБНОВЛЕНИЕ 1:

Вот информация MDN о том, что такое watch : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

ОБНОВЛЕНИЕ 2:

Я не могу использовать событие change .потому что изменение срабатывает только тогда, когда текстовый элемент ловит размытие.Это означает, что он будет срабатывать только тогда, когда пользователь переключается из этого текстового поля в другое.Это никоим образом не является динамическим, когда, например, проверяется, уже занято ли это имя пользователя или адрес электронной почты, что я хотел бы видеть при каждом отдельном изменении.

Answer 1

DOM написан на C / C ++, где концепция получения и установки переменной Javascript не существует, как вы, или я часто представляю это.Вы, вероятно, вообразили, что код будет реализован так, как показано ниже.К сожалению, Object.watch никогда не инициируется, потому что DOM не постоянно обновляет значение Javascipt, но Javascript запрашивает обновление из DOM.

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

Думая, как DOM обычно работает, каждый элемент имеет десяткипотенциальные свойства.

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

Представьте себе, есликод подчеркивания DOM должен был постоянно обновлять все свойства Javascript каждого элемента DOM%) Циклы памяти и ЦП проходили через крышу, чтобы гарантировать соответствие свойств отображаемому значению.Внутренние компоненты DOM также должны были бы проверить, изменилось ли значение Javascript потенциально.

Реальность - Красная таблетка

В основном DOM не передает информацию в javascript, но Javascript запрашивает информацию уДОМ.Это достойная интерпретация Javascript того, что происходит внизу.

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

Это объясняет, почему DOM часто является узким местом для Javascript.Javascript должен запрашивать / устанавливать внутренние значения DOM каждый раз, когда вы взаимодействуете с DOM.

Answer 2

Вам нужно использовать объекты jQuery, а не объекты DOM.Есть разница.

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

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

Примечание: вы можете сделать что-то странное, как это:

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

это будет работать

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

Answer 3

если вы хотите отслеживать изменения в текстовом элементе, почему бы просто не использовать метод .change ()?

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

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

Для мгновенного изменения используйте .keyup (): http://jsfiddle.net/rkw79/qTTsH/1/