DOMNodeInserted

僕のよくある悪い癖なのだが、思い付いたことを実現しようといろいろ調査をしていると、目的を実現できそうな切っ掛けとなる技術を発見する。本当にそれでいけんのかいな、とさらに深い調査を始めると、最初に考えていた目的を忘れて、結局その最初に見つけた技術で出来ることを全て試すことになって、あぁ { 面白かった | つまんなかった }で、何してたんだっけ？ みたいなことが多い。最悪なのはその結果を全て忘れて、同じことを繰り返したりすることなんだけど、結構やっちゃうんだよね…

と言うわけで今回もまさにそれ。忘れないように個々にメモします。

最近取り組んでいる bookmarklet を使った project 用に、script tag の読み込み完了をイヴェントハンドラに出来ないかどうか調べていました。以下結果。

---

script tag に onload を付ける。

ちゃんとした仕様書を見つけられた無かったけれどDOM では onload は限られたエレメントでしか fire しないようです。強いて言えばここ DOM-Level-2-Events にすこし載っています。

firefox

ファイル読み込み終了後 fire する

Opera 8.51

fire しない

Windows IE 6.0

fire しない

Safari 1.3.2

fire しない

と、見事に firefox 以外は fire しません。当たり前ですね。余談ですが、Firefox では img タグでも onload が fire します。となると、src attribute がつくタグは全て onload が fire するんじゃないかと期待できそうですが、それはそれで意味が通じます。特に“読み込み終了後 fire” というのは非常に通好みと言うか。以下、実験に使ったコード抜粋です。

<script type="text/javascript" onload="javascript:void(alert('onload'));" src="alert.js"></script>

alert.js には

alert("in script");

とだけあります。

onload sample

body に Listner Object的なものを付けてscript タグの挿入を監視

上でも黙って Quirksmode にリンクしましたけれども、javascript で event 周りをやろうと思ったら Quirksmode は素晴らしい文章の宝庫です。で、ずばり The events というページはすこからさき全ての文章への portal になっている、と言うか。以下のページ群は見ているだけでも楽しい様な browser で使用できる event ハンドラが列挙されています。（Opera 向けのページは何処にあるのだろう？）

• W3C DOM Level 2 Events
• Microsoft events
• Mozilla Events

Quirksmode の記述とやや異なりますが、Safari は DOM Level 2 Events を全て実装しているとあります。Web Specifications Supported in Opera 8 によれば Opera 8 も同様のようです。Free になったのは此のバージョンですから、まぁこれが主流になると考えて差し支えないでしょう。

と言うわけで、本題の DOMNodeInserted です。仕様書より引用すると、

Fired when a node has been added as a child of another node. This event is dispatched after the insertion has taken place. The target of this event is the node being inserted.

ですから、DOM Node を何処か別の DOM Node に挿入が完了した時に fire されるようですね。試してみましょう。以下のページにて。

DOM Node Inserted Sample

タイミングを計るのは難しいですが、上記 sample ページで読み込んでいるコードはしていることは同じですが、コメントを使ってファイルサイズを稼いでいます。やってもらえばわかりますが、DOMNodeInserted で fire される alert（MutationEvent と表示される）が出てから、alert2.js の alert （in script と表示される）が呼ばれます。（分かりにくい）

あとキモはこのコードでしょうか。

document.body.addEventListener('DOMNodeInserted', function(e){
alert(e);
}, false);

DOMNodeInserted で fire される function には デフォルトで MutationEvent という object が渡されます。その property を見れば、どんな DOM Node が挿入されたかわかる、という仕組みです。

---

が、Windows IE でこれを実現できる event handler を見つけられていないので…結局意味ないじゃん！みたいな。ただ listener object というアイデア自体はいけそうですね。