[JS] DOMContentLoadedが使える場合にはonloadより優先して使う方法

こんにちは、@yoheiMuneです。
onloadイベントよりも発火タイミングの早いDOMContentLoadedイベント。DOMContentLoadedイベントが使えるブラウザの場合に、onloadイベントよりも優先して利用する実装方法をブログに書きたいと思います。

DOMContentLoadedイベントとは

DOMContentLoadedイベントは、onloadイベントと似たような感じで、ページの初期表示の際に呼び出されるイベントです。 onloadイベントとの違いは、呼び出されるタイミング少し早いという点です。 詳細は、こちらの記事で記載させて頂いておりますので、ご参照頂ければ幸いです。

そしてページ初期表示時に実行したいJSの多くは、onloadまで待つ必要がなく、DOMContentLoadedで実行したいもの。
jQueryなどのライブラリを使えば、DOMContentLoadedのブラウザサポートも考慮した実装が簡単に出来るのですが、ライブラリなしで実装した場合にはちょっとした工夫が必要です。
今回はその実装方法を紹介する記事となります。

DOMContentLoadedが使える場合にはonloadより優先して使う

具体的には以下のような実装で、DOMContentLoadedをonloadよりも優先して使うことが出来ます。 以下の実装例はjQueryの実装を参考に記載しました。

// ページ初期化時に実行したい関数です
var completed = function() {

    // 登録していた初期化イベントを外す。
    document.removeEventListener("DOMContentLoaded", completed, false);
    window.removeEventListener("load", completed, false);

    // 以下、ページ初期化時に実装したいことを記載します。
}

// DOMContentLoadedとonloadとどちらにもイベントを登録する。
document.addEventListener("DOMContentLoaded", completed, false);
window.addEventListener( "load", completed, false );

この実装を行うことで、DOMContentLoadedとonloadのどちらも実装されているブラウザでは、より早く発火するDOMContentLoadedイベントが使われ、DOMContentLoadedイベントが実装されていないブラウザは、onloadイベントが使われます。

参照したjQueryのソースコードは、https://github.com/jquery/jquery/blob/master/src/core.jsです。
ソースコードを読んでいて、こんな感じで実装しているのかーと驚いたので、今回ブログに紹介させて頂きました。

最後に

JSのライブラリはブラウザ差異を埋めてくれるのですごくありがたいのです。そして、その差異の埋め方を知ることは良い勉強になります。jQueryのソースコードリーディングは難しく感じることも多いですが、勉強になります。

最後までご覧頂きましてありがとうございました。