Javascript监视事件不能处理DOM元素对象?

我知道我可以使用watch来绑定将在对象属性更改时触发的回调。 这适用于通用对象,如:

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

所以,我认为我可以简单地执行此操作来绑定将在输入字段值更改时触发的回调:

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

但这不起作用。 根本不会触发。 没有警报框。 我在firefox 5和谷歌浏览器(最新版)中尝试过它。

这不是watch工作原理吗? 手表根本不适用于DOM元素吗? 我以为它们只是对象 – 不是吗?

谢谢。

更新1:这是关于手表的MDN信息: https : //developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

更新2:否 – 我不能使用更改事件。 因为更改仅在文本元素捕获模糊时触发。 这意味着它只会在用户从此文本字段切换到另一个文本字段时触发。 例如,检查这个用户名或电子邮件地址是否已经在每个不同的更改中发生了Id,这在任何方面都不是动态的。

DOM是用C / C ++编写的,其中获取和设置Javascript变量的概念不存在,就像你或我经常想象的那样。 您可能想象要实现的代码类似于下面的代码。 遗憾的是, Object.watch永远不会启动,因为DOM不会不断更新Javascipt值,但是Javascript正在请求来自DOM的更新。

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

考虑DOM通常如何工作,每个元素都有许多潜在的属性。

  • innerHTMLvaluestyle.cssTextnameidstyle.backgroundstyle.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值。

您需要使用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); }); 

如果要跟踪文本元素的更改,为什么不使用.change()方法呢?

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

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

对于即时更改,请使用.keyup(): http : //jsfiddle.net/rkw79/qTTsH/1/