2011-09-11 12 views
8

私は自分のウェブページ内のセルの内容の変更を傍受する必要があります。javascriptでinnerHTMLの変更をインターセプトする方法は?

次のコードは、addEventListenerが機能しないことを示しています。

function modifyText() { 
alert("!"); 
} 

var el=document.getElementById("mycell"); 
el.innerHTML="a" 
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear... 
el.innerHTML="Z"; 

コードは単なるおもちゃの例です。私の実際のケースでは、ページ内の変更(したがってセル内での変更)は、私が制御できないwebappによって行われます。

+0

これはどのブラウザタイプでテストしていますか? IEが非標準の.attachEvent()メソッドを使用することを覚えておいてください。 –

+2

最初に変更はどのように起こっていますか?あなたが「ウェブアプリケーション」と言うと、ページコンテンツを構築して返すサーバーサイドのアプリケーションを意味します。そうであれば、変更はJavaScriptのコードでは検出できません。なぜなら、JavaScriptのスコープが適用される前にサーバー上で「変更」が行われたからです。ページ上のJavaScriptの観点からは、変更はありませんでした。 – David

答えて

8

DOM要素changeをそのように聞くことはできません。 changeイベントはほとんどinputです。

これに役立つ新しいDOM 3イベントがいくつかあります。ここで

はいくつかある:

DOMCharacterDataModified //ドラフト

DOMSubtreeModified

+0

残念ながら、すべての突然変異イベントは推奨されていません! innerHTMLの値の変更を聞くためにDOMCharacterDataModifiedのような他の魔法のイベントがありますか? – Rafe

1

はこのMost efficient method of detecting/monitoring DOM changes?助けをしていますか?

100%クロスブラウザソリューションがないようですが、回避策の1つは興味のある要素をポーリングしてinnerHTML.lengthが変化するかどうかを確認することです!

関連する問題