[JavaScript] ページのDOMツリーが構築された直後にJavaScriptを実行したい - DOMContentLoaded イベントの利用

このページのタグ:[JavaScript]
ページのDOMツリーが構築された直後にJavaScriptを実行するコードを紹介します。

概要

ページのDOMツリーが構築された直後にJavaScriptを実行するには、DOMContentLoaded イベントを利用します。loadイベントはページ読み込み後、DOMツリーを構築し、画像ファイルなどのコンテンツファイルが読み込み終わった時点で発生します。そのため、DOMContentLoaded は load イベントより先に実行されます。

プログラム

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function OnDomContentLoadedFunc() {
      var obj = document.getElementById("message");
      obj.innerHTML += "DOMContentLoaded イベントが呼び出されました。<br/>";
    }
    function OnLoadFunc() {
      var obj = document.getElementById("message");
      obj.innerHTML += "onload イベントが呼び出されました。<br/>";
    }

    window.onload = OnLoadFunc;
    window.addEventListener("DOMContentLoaded", OnDomContentLoadedFunc, false);
  </script>
</head>
<body>
  <div id="message"></div>
</body>
</html>

解説

onloadイベントに、OnLoadFuncを設定し、DOMContentLoadedイベントに、OnDomContentLoadedDFunc を設定しています。それぞれのイベントハンドラの関数では、id="message" を持つ枠に対して、"onload イベントが呼び出されました。"、"DomContentLoaded イベントが呼び出されました。" のメッセージを表示しイベントが呼び出されたことを画面に表示するコードを実装しています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。onloadイベントより先にDOMContentLoadedイベントが呼び出されていることが確認できます。

登録日 :2016-01-24    最終更新日 :2016-02-25
このページのタグ:[JavaScript]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)