How do can watch DOM Object properties?

问题

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 )
  })
}

回答1:

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.

回答2:

watch in Dojo is only defined for dojo.Stateful objects, and also in dijit widgets (which all inherit from dojo.Stateful).

You cannot watch for property changes in a plain DOM node in a cross-browser way without resorting to browser-specific quirks. Events are not properties of a node.

来源：https://stackoverflow.com/questions/5520346/how-do-can-watch-dom-object-properties

标签

javascript

dojo