[JavaScript] onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント

こんにちは、@yoheiMuneです。
今日は、javaScriptのイベントの一つであるDOMContentLoadedイベントを学んだので、 それについてブログを書きたいと思います。

DOMContentLoadedイベントについて

JavaScriptをページ初期表示時に実行する場合に、loadメソッドを使うことが多いかと思います。
（私はそうでした）

window.addEventListener("load", function(){
  // 初期表示時の処理を書く
}, false);

初期表示時にJavaScriptを動かすなら、loadイベントとあまり考えずに使っていました。
けど、DOMContentLoadedイベントというものがあることを今日知りました。

DOMContentLoadedイベントは、HTML解釈終了時に呼び出されるイベント

onloadイベントは、画像ロードも含んでロードが完了したら呼び出されるメソッド。
DOMContentLoadedイベントは、HTMLの解釈が終わったら呼び出されるメソッドとのこと。
つまり、onloadよりもDOMContentLoadedイベントの方が早く発火するイベントという事です。
jQueryのredyもこのタイミングっぽい（ソースを読んだ限りでは）。

画像表示が多いページでは、画像ロードに時間はかかるけど、 初期表示時のJavaScript実行は早めにやりたいといった時には、DOMContentLaodedメソッドを使うと良いのかなと思います。

DOMContentLoadedのサンプルコード

実際に使う場合のサンプルソースは以下です。
他のイベントと同じようにaddEventListenerなどで、イベントを登録します。

window.addEventListener("DOMContentLoaded", function(){
  // 画面読み込み時の初期処理とか書く。
}, false);

DOMContentLoadedの問題点

IE7,8やSafariの3.1未満はサポートしていないようです（詳しくは、こちら）。
もし古いブラウザも考慮した実装をすべき場合には、jQueryなどのライブラリを利用すると良いかもしれません。
スマホなどの新し目のブラウザの場合には、あまり気にしなくても良いかも。

最後に

イベントって色々なものが定義されているんですね。
またまた勉強になりました。

今回もご覧頂きましてありがとうございました。