load イベント

javascript で html の要素を操作する場合（何かのタイミングで要素を追加する、または、特定の要素にclass属性を追加する等）は、script タグを用いて html 内に記述したコードは、html 読み込み中に実行されるため、コードを記述した位置より後の html にはアクセスできないといった理由から、ブラウザが DOM解析 を完了する（ページ内の html を全て読み込んだ）タイミングで処理を開始するのが望ましい場合がある。
そういった場合は、html を操作する処理を行う関数を load イベントに登録することが多い。

DOMContentLoaded イベント

その点、DOMContentLoaded イベントはDOM解析が完了したタイミングで発生するため、前述の場合よりも早く javascript の処理が開始されることになり、体感のページ読込み完了時間を早くすることができる。

しかし、DOMContentLoaded イベントは、IE など、一部ブラウザでは実装されていない（本エントリ執筆時点）。今回は、この DOMContentLoaded イベントをクロスブラウザで使用できるようにしたライブラリを作成してみた。

使い方

ZIPファイルを解凍後、JSファイルを任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="common/js/clListener.js"></script>

次に、DOMContentLoadedのタイミングで実行したい関数を、以下のようにcontentLoadedListenerに登録する。

clListener.add( 呼び出したい関数 );

以上で、登録した関数がDOMContentLoadedイベントで呼び出されるようになる。
尚、関数は複数登録可能となっている。