2009-08-02 7 views
6

Internet Explorerには、DOMが変更されたときに起動されるイベントはありますか?たとえば:onDocumentChangeイベントはありますか?

document.attachEvent("ondocumentchange", function() { 
    alert("you've just changed DOM!"); 
}); 

そして、私が実行:テキストと

document.appendChild(document.createElement("img")); 

ウィンドウ "あなただけのDOMを変更しました!"表示されます。

Javascriptを使用してIE6で「高度な」CSSセレクタ(たとえば+、>、[attr])をエミュレートしようとしています。しかし、動的コンテンツでは正しく動作するためには、ドキュメントを変更するたびに再計算する必要があります。

答えて

9

ブルートフォース "ソリューション":

(function (previousInnerHTML) { 
    return function() { 
     if (document.body.innerHTML !== previousInnerHTML) { 
      alert("you've just (at max 33ms ago) changed DOM"); 
     } 
     setTimout(arguments.callee, 33); 
    }; 
})(document.body.innerHTML)(); 
+2

醜いですが、IE6で動作します。 –

+0

なぜsetTimeoutを使用しますか?この場合、setIntervalは意味をなさないでしょうか? –

+0

他の誰かがこの古い投稿に遭遇するはずですか?IE 11ではmutationObserverのオプションがありますhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver# –

3

DOM突然変異の事象を見る - http://en.wikipedia.org/wiki/DOM_Eventsを参照し、突然変異イベントのセクションまでスクロールします。これらのイベントのサポートは非​​常にスケッチですので、使用する際には注意が必要です。特に、IEやOperaでのサポートの欠如。 Firefox、Safari、Chromeは唯一のようだ。以下のような

何か:

document.addEventListener("DOMSubtreeModified", function() { 
    alert("you've just changed DOM!"); 
}); 

あなたはaddEventListenerを、ないattachEventを使用する必要があるイベントのこれらの種類のhttp://www.quirksmode.org/dom/events/index.htmlによります。 イベントは明らかに泡立つので、うまくいくはずです。私の頭の上オフ

+2

"[...]ですべてのIEでのサポートの欠如[...]" - それが問題だ - 私はので、IEのこのイベントを必要とします。 –

+0

恐れ入りましたが、少なくともDOMツリーを手作業で再帰することなく、それをやり遂げる方法はないと思います。特定の子ノードへの変更を絞り込むことはできませんか? – Kazar

+0

突然変異のイベントは廃止されましたが、mutationObserverはIE 11以降で利用可能ですhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver# –

1

、このかもしれない作品:。

document.body.attachEvent('onpropertychange', function(event) { 
    if (event.propertyName !== 'innerHTML') return; 
    alert("you've just changed DOM!"); 
}); 

これはIE独自の[onPropertyChangeイベント](http://msdn.microsoft.com/en-us/library/ms536956(VS.85).aspx)に依存している - ノードが挿入されるたびに、ドキュメントのinnerHTMLが変化するからである。しかし:

  1. それはプロパティの特定の種類では動作しない場合があります。それはときにのみretri再計算したいという点で、私はinnerHTMLは「ゲッター」のように機能するであろうと想像eved。

  2. また、偽陽性のたくさんを拾うだろう - 他のものの多くは、ノードの挿入とは何の関係もないでしょうinnerHTMLを変更します。これを軽減するには、ドキュメント全体ではなく、特定の要素を聞きます。

+1

残念なことに、「in innerTextまたはinnerHTMLを変更する子要素によって親要素の__onpropertychange__イベントが発生することはありません」とドキュメントを参照してください。関数がすべてのDOM要素に添付されていても、DOM操作関数を使用すると呼び出されません。innerHTMLが直接変更された場合のみです。 –

関連する問題