如何观察DOM对象属性？ [英] How do can watch DOM Object properties?

问题描述

我想观看一个DOM节点属性，但我似乎无法使其正常工作。

在我的小部件中，我尝试过以下操作。

  startup：function（）{
 this.inherited（arguments）; 
 
 //首先尝试使用dojo 1.6手表。 
 //我正在设置widget 
 //的属性来引用DOM节点的offsetWidth属性
 this.width = this.domNode.offsetWidth; 
 this.watch（width，function（）{
 console.debug（'Width changed to'+ this.domNode.offsetWidth）
}）
 
 // this.width是否包含this.domNode.offsetWidth的引用或副本？ 
 
 //第二次尝试，Mozilla手表
 this.domNode.watch（offsetWidth，function（）{
 console.debug（'Width changed to'+ this。 domNode.offsetWidth）
}）
} 
  

解决方案>

我想观看一个DOM节点
属性，但我似乎无法获得
的工作。

通过将Mozilla的 watch 直接添加到DOM节点，您无法使其正常工作。

在 http：//james.padolsey。 com / javascript / monitoring-dom-properties / 提到使用 setInterval ， onpropertychange （IE只有）和 DOMSubtreeModified （还有其他这样的标准DOM修改事件，如 DOMAttrModified ，但是你必须检查浏览器支持）。标准DOM修改事件只有在DOM属性更改时才起作用，而不是等效属性（尽管可以通过 initMutationEvent 从JS触发变异事件）：

 < input /> 
< script> 
 window.onload = function（）{
 var ct = 0; 
 document.addEventListener（'DOMAttrModified'，function（）{
 alert（'Value modified'+（++ ct）+'times'）; 
}，false）; 
 
 var input = document.getElementsByTagName（'input'）[0]; 
 
 input.setAttribute（'value'，5）; //触发事件
 input.value = 15; //虽然它设置的值，它不会触发事件
 
}; 
< / script> 
  

//首先尝试使用dojo 1.6手表。
//我设置
小部件的属性//引用DOM
节点的offsetWidth属性

this.width = this.domNode.offsetWidth;
this.watch（width，function（）{
console.debug（'Width changed to'+ this.domNode.offsetWidth）}）

您可以使用Dojo API监视width属性的设置，但这并不会为您跟踪DOM节点（尽管 http://dojotoolkit.org/features/1.6/widget-watch 似乎建议它）。例如，您可以执行以下操作：

  widget.set（'width'，100）; 
  

然后您的观看事件可能是修改为动态更改DOM width （但不是 offsetWidth ，因为这是一个只读属性）。

尽管如此，您似乎试图检测自动 offsetWidth 计算更改，而不是您自己的更改。在这一点上，您最好的解决方案似乎是 setInterval 。

// this.width是否包含引用
或this.domNode.offsetWidth的副本？

自此以来的副本.domNode.offsetWidth是一个数字，在JavaScript中，非对象类型将始终按值复制。

//第二次尝试， Mozilla手表

this.domNode.watch（offsetWidth，
function（）{
console.debug（'Width changed to'+ this.domNode.offsetWidth）

}）

如果这能够工作（而不是），您需要使用 this.offsetWidth ，因为Mozilla将回调这个设置为被观看对象的回调。

I would like to watch a DOM node property but I can't seem to get it to work.

Within my widget, I've tried the following.

startup: function() {
  this.inherited(arguments);

  // First try using the dojo 1.6 watch.
  // I'm setting the property of the widget
  // to reference the DOM node's offsetWidth property
  this.width = this.domNode.offsetWidth;
  this.watch("width", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })

  // Does this.width contain a reference or a copy of this.domNode.offsetWidth?

  // Second try, the Mozilla watch
  this.domNode.watch("offsetWidth", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })
}

解决方案

I'm would like to watch a DOM node property but I can't seem to get it to work.

You can't get it to work by adding Mozilla's watch directly to the DOM node.

At http://james.padolsey.com/javascript/monitoring-dom-properties/ mention is made of using setInterval, onpropertychange (IE only), and DOMSubtreeModified (there are other such standard DOM modification events like DOMAttrModified, but you'd have to check browser support). The standard DOM modification events only work if the DOM attribute is changed, not the equivalent property (though you can trigger a mutation event from JS by initMutationEvent):

<input />
<script>
window.onload = function () {
  var ct=0;
  document.addEventListener('DOMAttrModified', function () {
      alert('Value modified ' + (++ct) + ' times');
  }, false);

  var input = document.getElementsByTagName('input')[0];

  input.setAttribute('value', 5); // Triggers the event
  input.value = 15; // Though it sets the value, it doesn't trigger the event

};
</script>

// First try using the dojo 1.6 watch. // I'm setting the property of the widget // to reference the DOM node's offsetWidth property
this.width = this.domNode.offsetWidth; this.watch("width", function() { console.debug('Width changed to ' + this.domNode.offsetWidth ) })

You can monitor the setting of the width property here using the Dojo API, but this does not appear to track the DOM node for you (though http://dojotoolkit.org/features/1.6/widget-watch seems to suggest it does). For example, you can do:

widget.set('width', 100);

and then your watch event above could be modified to dynamically change the DOM width (but not the offsetWidth since that is a read-only property).

Still, it appears you're trying to detect automaticoffsetWidth calculation changes, not your own changes. The best solution for you at this point seems to me to be setInterval.

// Does this.width contain a reference or a copy of this.domNode.offsetWidth?

A copy since this.domNode.offsetWidth is a number and in JavaScript, non-object types will always get copied by value.

// Second try, the Mozilla watch
this.domNode.watch("offsetWidth", function() { console.debug('Width changed to ' + this.domNode.offsetWidth )
})

If this were able to work (and it doesn't), you'd need to use this.offsetWidth inside the function since Mozilla sets the callback this to that of the object being watched.

这篇关于如何观察DOM对象属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！