onload イベント

DOM イベント Event オブジェクト

定義と使用法

onload イベントはオブジェクトが読み込まれた後に発生します。

onload は最もよく <body> 要素で使用され、ウェブページがすべてのコンテンツ（画像、スクリプトファイル、CSS ファイルなど）を完全に読み込んだ後にスクリプトを実行するために使用されます。

ページの読み込みが完了した後に、訪問者のブラウザの種類とバージョンを確認し、それに基づいて正しいバージョンのウェブページをロードすることができます。

onloadイベントはcookieの処理にも使用できます（以下の追加例を参照してください）.

例

ページが読み込まれた後にJavaScriptを実行する：

<body onload="myFunction()">

自分で試してみてください

例2

<img>要素でonloadを使用。画像が読み込まれた後に「画像が読み込まれました」のアラートを表示：

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

自分で試してみてください

例3

onloadイベントを使用してcookieを処理する：

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
     text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

自分で試してみてください

構文

HTMLで：

<element onload="myScript">

自分で試してみてください

JavaScriptで：

object.onload = function(){myScript};

自分で試してみてください

JavaScriptでaddEventListener()メソッドを使用する：

object.addEventListener("load", myScript);

自分で試してみてください

注釈：Internet Explorer 8 以降のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポートされていません
キャンセル可能： サポートされていません
イベントタイプ： ユーザーインターフェースから生成された場合、UiEvent。そうでない場合 Event。
サポートされている HTML タグ： <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM バージョン： レベル2 イベント

ブラウザサポート

イベント Chrome IE Firefox Safari Opera
onload サポート サポート サポート サポート サポート
DOM イベント Event オブジェクト