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信息： https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

更新2：

我无法使用更改事件。因为更改仅在文本元素捕获模糊时触发。这意味着它只会在用户从此文本字段切换到另一个文本字段时触发。例如，检查是否已经采用了我希望在每次不同的更改中发生的用户名或电子邮件地址时，它并不是动态的。

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值是否可能发生了变化。

Reality - Red Pill

基本上，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/

JavaScript监视事件不能处理DOM元素对象？

3 个答案:

Reality - Red Pill