load ( onload )イベント
load ( onload )イベントは、設定されたタグエレメントが読み込まれたら、またはページ、画像が読み込まれたタイミングで発生するイベントです。
<body> や Window に設定される例を多くみかけます。Window はドキュメントの全てのコンテンツがロードし終わると onload イベントが発生します。
body.onload = function( event ){ console.log( event ); };
Exampleを参照してください。
Window では、web ページが読み込まれたら実行されるので、初期設定に利用することができます。
window.onload = function(){ };
onload イベントを使用して訪問者のブラウザとそのバージョン情報を取得し適切な web ページをロードすることができます。
onload イベントは、Cookie の処理にも使用できます。
このイベントの対としてunload ( onunload )イベントがあります。
似た機能にonpageshow イベントがあります。onload イベントはキャッシュを使わないロードのみが実行されます。キャッシュからドキュメントをロードするとonloadイベントは発生しません。
pageshowイベントに比べて、適応されるエレメントに違いがあります。 loadイベントは Window、Document、各エレメントで使うことができますが、pageshowイベントは Window 、body オブジェクトで使います。
ページ内 Index
構文(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)
Bubbles | No |
Cancelable | No |
Interface | UiEvent(ユーザーインターフェイスから生成された場合),Event |
Supported HTML Elements | 全般 |
GlobalEventHandlersミックスインで定義されおり、HTMLElement, Document, Windowインターフェイスで利用できます。
Example
load ( onload )イベントの例です。確認
ボタンをクリックしてみてください。コードが実行されます。
event 詳細は開発用コンソールで確認してください。
読み込みに関するイベント
読み込み、 FileReader に関するイベントです。 FileReader は EventTarget が継承しているインターフェイスです。
onabort | 読み込みが途中でキャンセルされたら |
onerror | リソースの読み込みの失敗または実行時にエラーが発生したら |
onload | ページが読み込まれたら。キャッシュからページが読み込まれたこのイベントは発生しません |
onloadend | 読み込みが終了したら |
onloadstart | メディアデータのダウンロードプロセスが始まったら |
pagehide | ページが遷移したら。キャッシュされます |
pageshow | ページが読み込まれたら。キャッシュの有無に関係なくイベントが発生 |
onprogress | リクエストが処理されている間 |
onunload | ページが遷移したら。キャッシュされません |