JavaScriptのonload・onunloadとは？ページ読み込み時・離脱時のイベント処理を解説
onload と onunload は、ページの読み込み完了時やページ移動時に処理を実行するためのイベントです。
ページ表示後の初期処理や、離脱時のメッセージ表示などに利用できます。
onloadイベントとは？
onload は、ページや画像などの読み込みが完了したタイミングで発生するイベントです。
ページ表示後に実行したい処理がある場合に利用します。
使用例1：ページ読み込み後に処理を実行
<body onload=”timer1 = setTimeout(‘msg()’, 3000)”>
→ ページ読み込み完了後、3秒おきに msg() 関数を実行します。
使用例2：画像読み込み完了時に処理を実行
document.images[0].onload = msg;
→ 1番目の画像が読み込まれたら msg() を実行します。
onunloadイベントとは？
onunload は、ページから離れるとき（別ページへ移動するとき）に発生するイベントです。
使用例：ページ離脱時にメッセージを表示
<body onunload=”alert(‘またね！’)”>
→ ページを閉じたり移動したときにダイアログを表示します。
Eventオブジェクトとは？
Event オブジェクトは、マウスやキーボードの状態など、
発生したイベントに関する情報を保持するオブジェクトです。
ブラウザによって扱い方が異なります。
- Internet Explorer：
window.eventとして参照 - Firefox / Opera / Netscape： イベントハンドラの引数として受け取る
そのため、関数にイベントオブジェクトを渡す書き方が一般的です。
<button onclick=”presskey(event)”>クリック</button>
→ presskey() 関数の引数として Event オブジェクトが渡されます。
まとめ
onload：ページ読み込み完了時に処理を実行onunload：ページ離脱時に処理を実行Eventオブジェクトでイベント情報を取得できる- ブラウザによって Event の扱い方が異なるため注意
