DOMContentLoaded イベントの使い方

DOM の DOMContentLoaded イベントとは
DOMContentLoaded イベントと load イベントの違い
DOMContentLoaded イベントはいつ使うの？

DOM の DOMContentLoaded イベントとは

HTML文書がダウンロードされて解析され、DOMツリーが作成された時に、 document オブジェクトの DOMContentLoad イベントが発生します。

言い換えれば、 DOMContentLoadedイベントの前では、HTML文書内のHTML要素はまだ認識されていません。

DOMContentLoaded イベントは、HTML文書に付随する画像やスクリプトなどの外部リソースの取得が完了する前でも発生します。このため、 DOMContentLoaded イベント発生時点では document の readyState プロパティは通常 interactive です。

DOMContentLoaded イベントと load イベントの違い

前述の通り、DOMContentLoadedイベントは外部リソースの取得完了を待たずに発生します。このため、 DOMContentLoaded イベント発生時点では document の readyState プロパティは interactive 値となります。

一方、window オブジェクトの load イベントは外部リソースを含めて全て揃ったタイミングで発生します。従って load イベント発生時点では document の readyState プロパティは complete 値になります。

DOMContentLoaded イベントはいつ使うの？

DOMのHTML要素を参照できる最も速いタイミングがDOMContentLoadedイベントです。

DOMContentLoadedイベントは外部リソースの取得完了も待たずに発生するので、HTML文書に直接埋め込んだスクリプトからDOMを参照する場合に利用します。

多くの場合は window の load イベントの発生まで待ち、全てのリソースが揃ってから何らかの初期化処理等を続行するので十分な場合が多いと思います。しかし、外部リソースの取得に時間がかかることが想定されるような状況では DOMContentLoaded イベントを利用して、最低限の状況でページの初期化を行うことも検討すべきかもしれません。

次の例ではDOMContentLoadedイベントのハンドラで、ボタンにクリックイベントリスナーを取り付けています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const button1 = document.getElementById('button1')
        button1.addEventListener('click', (event) => {
          event.preventDefault()
          console.log('OK clicked')
        })
      })
    </script>
  </head>
  <body>
    <button id="button1">OK</button>
  </body>
</html>

以上、ここでは DOMContentLoaded の説明と利用例について説明しました。