Firefoxのテキストボックスのonpropertychange？

Question

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

Answer 1

onpropertychangeは、非標準です。 http://msdn.microsoft.com/en-us/library/ms536956

Answer 2

onpropertychangeイベントがIE Specific：http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.htmlのように見えます。

しかし、これは、少なくともFirefox 3.0.10では「DOMAttrModified」というイベントをサポートしています。以下は、それがどのように動作するかの抜粋です：

console.logはFirefoxの拡張機能 Firebugがインストールされていると想定されて

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

。

Answer 3

onpropertychangeイベントを模倣する2つの方法があります。前述のMutationイベントは最新のブラウザでも同じように動作するはずです。また、古いバージョンのFF <をサポートする "object.watch"非標準メソッド3

MDCのドキュメントを参照してください。

Object.watch

Mutation events

Answer 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