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：

这里是关于 watch 是什么的 MDN 信息： 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 下划线代码必须不断更新每个 DOM 元素 Javascript 属性 %) 内存和 CPU 周期将通过屋顶，必须确保属性与显示值匹配。 DOM 的内部也必须检查 Javascript 值是否可能发生了变化。

现实 - 红色药丸

基本上 DOM 不会向 javascript 提供信息，但 Javascript 会从 DOM 请求信息。这是对底层发生的事情的一个不错的 Javascript 解释。

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

这解释了为什么 DOM 通常是 Javascript 的瓶颈。每次与 DOM 交互时，Javascript 都必须请求/设置内部 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/