JavaScript监视事件不能在DOM元素对象上工作

JavaScript watch event not working on DOM element objects?

本文关键字：元素 对象 工作 DOM 监视 事件 不能 JavaScript      更新时间：2023-09-26

我知道我可以使用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事件。因为只有当文本元素捕获模糊时才会触发更改。这意味着它只会在用户从这个文本框切换到另一个文本框时触发。它不是动态的，例如，检查用户名或电子邮件地址是否已被占用，我希望在每次不同的更改时发生

DOM是用C/c++编写的，其中获取和设置Javascript变量的概念并不像你或我经常想象的那样存在。您可能认为代码的实现类似于下面的代码。不幸的是，Object.watch从未启动，因为DOM不是不断更新Javascript值，但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的瓶颈。Javascript必须在每次与DOM接口时请求/设置内部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 + '<br/>'
                  + 'new value: ' + e.target.value);
})

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

相关文章：