Javascript观看事件不能处理DOM元素对象？ [英] Javascript watch event not working on DOM element objects?

问题描述

我知道我可以使用 watch 绑定一个在对象属性更改时触发的回调。而且这对泛型对象起作用，如：

I know I can use watch to bind a callback that will be triggered when object property changes. And this does work on generic objects like:

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

所以，我以为我可以简单地这样做来绑定一个在输入字段值改变时触发的回调：

So, I thought that I can simply do this to bind a callback that will trigger when input field value changes:

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

但这不行。只是不触发。没有警报框。我在firefox 5和google chrome（最新）中尝试过。

But this doesn't work. Simply doesn't trigger. No alert boxes. I 've tried it in firefox 5 and google chrome (latest).

这不是如何看的作品？ 只是不适用于DOM元素？我以为他们只是对象 - 不是吗？

Is this not how watch works? Is watch simply doesn't work on DOM elements? I thought that they're simply objects - aren't they?

谢谢。

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

更新2：
否 - 我无法使用更改事件。因为只有当文本元素捕捉到模糊时才会触发更改。这意味着只有当用户从此文本框切换到另一个文本框时，才会触发。例如，检查这个用户名或电子邮件地址是否已经被采用，哪个Id在每个不同的变化上都会发生，这不是动态的。

UPDATE 2: No - I cannot use change event. because change only triggers when text element catches blur. Meaning that it'll only trigger when user switches from this textfield to another one. It's not in any way dynamic for when for example checking if this username or email address already taken which Id' like to happen on each distinct change.

推荐答案

DOM是用C / C ++编写的，其中获取和设置Javascript变量的概念不存在，你或我经常想象它。你可能想像要执行的代码类似于下面的代码。不幸的是， Object.watch 永远不会启动，因为DOM不会不断更新Javascipt值，但是Javascript正在从DOM请求更新。

The DOM is written in C/C++ where the concept of getting and setting a Javascript variable doesn't exist as you or I would often imagine it. You probably imagined the code to be implemented similar to what is below. Unfortunately Object.watch is never initiated because the DOM isn't constantly updating the Javascipt value, but Javascript is requesting an update from the DOM.

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

想想DOM如何通用，每个元素都有几十个潜在的属性。

Thinking how the DOM commonly works, each element has dozens of potential properties.

• innerHTML ， value ， style.cssText ，名称， ID ， style.background ， style.backgroundColor

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

想像一下，如果DOM下划线代码不得不不断更新每个DOM元素Javascript属性％）内存和CPU周期将经过屋顶，必须确保属性与显示值匹配。 DOM的内部部件也必须检查Javascript值是否有潜在的变化。

Imagine if the DOM underlining code had to constantly update every DOM elements Javascript properties %) Memory and CPU cycles would go through the roof having to ensure the properties matched the display value. The DOM's internals would also have to check if the Javascript value has potentially changed.

基本上DOM没有给出javascript的信息，但是Javascript正在从DOM请求信息。这是对下面发生的一个不错的Javascript解释。

Basically the DOM isn't giving info to javascript, but Javascript is requesting the info from the DOM. This is a decent Javascript interpretation of what is going on underneath.

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

这就解释了为什么DOM往往是Javascript的瓶颈。每次与DOM接口时，Javascript都必须请求/设置内部DOM值。

This explains why the DOM is often the bottleneck for Javascript. Javascript has to request/set the internal DOM values every time you interface with the DOM.

这篇关于Javascript观看事件不能处理DOM元素对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！