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 | ページが遷移したら。キャッシュされません |