Firefox中文本框的onpropertychange？答案

【问题标题】：onpropertychange for a textbox in Firefox?Firefox中文本框的onpropertychange？
【发布时间】：2010-10-29 11:58:11
【问题描述】：

如何在 Firefox 中使用 JavaScript 处理 onpropertychange 的文本框？

下面是一个例子：

var headerBGColorTextBox = document.getElementById('<%= tbHeaderBGColor.ClientID %>');

if (headerBGColorTextBox != null) {
  headerBGColorTextBox.pluggedElement = document.getElementById('<%= trHeaderBG.ClientID %>');
  headerBGColorTextBox.onpropertychange = function() {
    alert('function called');
    if (event.propertyName == 'style.backgroundColor' && event.srcElement.pluggedElement != null)
      alert(event.propertyName);
    event.srcElement.pluggedElement.style.backgroundColor = event.srcElement.style.backgroundColor;
  };
}

【问题讨论】：

标签： javascript events firefox dom mutation-events

【解决方案1】：

有两种方法可以模拟 onpropertychange 事件，上面提到的 Mutation 事件应该在现代浏览器中同样有效，而“object.watch”非标准方法将为旧版本的 FF

请参阅有关 MDC 的文档。

Object.watch

Mutation events

【讨论】：

OBJECT.watch 不会跟踪 DOM 元素的变化。您必须在符合 W3C 的浏览器中使用 DOMAttrModified 突变事件。 OBJECT.watch 仅用于跟踪您在 Javascript 中创建的对象的属性更改。

【解决方案2】：

似乎onpropertychange 事件是 IE 特定的：http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.html。

不过，话虽如此，Firefox 至少 3.0.10 确实支持名为“DOMAttrModified”的事件。以下是它的工作原理：

document.body.addEventListener("DOMAttrModified", function () { console.log ("Args: %o", arguments); }, false);
document.body.id = "Testing";

其中console.log 是假设安装了Firefox 扩展Firebug。

【讨论】：

DOMAttrModified 也被 IE9 和 Opera(7+) 支持。截至 2011 年 8 月，仍然无法在 webkit 中使用。
@nix：WebKit 还没有消息吗？你知道他们计划支持这种用例吗？

【解决方案3】：

onpropertychange 是非标准的。见http://msdn.microsoft.com/en-us/library/ms536956

【讨论】：

【解决方案4】：

以下代码有效：

var foo = '<%= tbHeaderBGColor.ClientID %>';

function changetext() 
  {
  alert('function called');
  if (event.propertyName == 'style.backgroundColor' && event.srcElement.pluggedElement != null)
    alert(event.propertyName);

  event.srcElement.pluggedElement.style.backgroundColor = event.srcElement.style.backgroundColor;
  }

if (!!document.addEventListener)
  {
  document.getElementById(foo).addEventListener("DOMAttrModified", changetext, false);
  }
else
  {
  document.getElementById(foo).addBehavior("foo.htc");
  document.getElementById(foo).attachEvent("onpropertychange", changetext);
  }

DOM Mutation Events

【讨论】：