備忘録的プログラミングリファレンス

load ( onload )イベント

 load ( onload )イベントは、設定されたタグエレメントが読み込まれたら、またはページ、画像が読み込まれたタイミングで発生するイベントです。

 <body>Window に設定される例を多くみかけます。Window はドキュメントの全てのコンテンツがロードし終わると onload イベントが発生します。

body.onload
body.onload = function( event ){
	console.log( event );
};
詳しくはExampleを参照してください。

 Window では、web ページが読み込まれたら実行されるので、初期設定に利用することができます。

window.onload
window.onload = function(){

};

 onload イベントを使用して訪問者のブラウザとそのバージョン情報を取得し適切な web ページをロードすることができます。

 onload イベントは、Cookie の処理にも使用できます。

 このイベントの対としてunload ( onunload )イベントがあります。

 似た機能にonpageshow イベントがあります。onload イベントはキャッシュを使わないロードのみが実行されます。キャッシュからドキュメントをロードするとonloadイベントは発生しません。

 pageshowイベントに比べて、適応されるエレメントに違いがあります。 loadイベントは WindowDocument、各エレメントで使うことができますが、pageshowイベントWindowbody オブジェクトで使います。

構文(Syntax)

 load ( onload )イベントを定義する方法には以下があります。

in HTML

<tagelement onload ="function(); ...;">

in JavaScript

object.onload  = function(){... };

addEventListener()

 関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。

object.addEventListener("load ", function_name);

 スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。

object.addEventListener("load ", ()=>{ ... },false);
// または
object.addEventListener("load ",function(){ ... },false);

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

備考(Remarks)

BubblesNo
CancelableNo
InterfaceUiEvent(ユーザーインターフェイスから生成された場合),Event
Supported HTML Elements全般

 GlobalEventHandlersミックスインで定義されおり、HTMLElement, Document, Windowインターフェイスで利用できます。

Example

 load ( onload )イベントの例です。確認ボタンをクリックしてみてください。コードが実行されます。
 event 詳細は開発用コンソールで確認してください。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。