この記事で分かること
onload・onunloadイベントの役割と仕組み- ページ読み込み完了時に処理を実行する方法
- ページ離脱時に処理を実行する方法
Eventオブジェクトの基本と扱い方- ブラウザごとの
Eventの違い
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 オブジェクトが渡されます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
onload・onunload などの「ページ読み込み・離脱イベント」は、Webページの初期化処理や終了処理を理解するうえで重要な基礎です。
書籍ではこれらを体系的に順序立てて学べるため、イベントの仕組みを根本から理解しやすくなります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
ページ読み込み後の処理（onload）や、イベントの基本的な流れを丁寧に理解できます。
この本で解決できること：
onloadの動作を視覚的に理解できる- イベントと関数の組み合わせ方が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
ページ読み込み・離脱イベントの仕組みを深く理解し、実務レベルの基礎力を身につけられます。
この本で解決できること：
onload/onunloadの動作原理を体系的に理解できる- DOM とイベントの連携を実務レベルで学べる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
onload・onunload は「ページの開始と終了」を扱う重要なイベントで、
実際の画面の動きを動画で見ると理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
onloadの動作を視覚的に理解できる- イベントと初期化処理の関係が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、onload・onunload の理解をさらに深めたい方に最適です。
この講座で解決できること：
- ページ読み込み・離脱イベントの応用的な使い方を理解できる
- 実務レベルの初期化処理・終了処理の設計が身につく
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
onloadと他イベントの使い分けで混乱しやすい- 初期化処理・終了処理の設計が難しい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ページ読み込み・離脱イベントのようなつまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onload・onunload に関するよくある質問（FAQ）
onload は body 以外にも使える？
はい。画像・スクリプト・iframe など、読み込み完了を検知したい要素にも使用できます。
onunload はスマホでも動作する？
スマホではブラウザ仕様により動作が制限される場合があります。
ページ離脱時に確認ダイアログを出せる？
beforeunload イベントを使うと可能ですが、ブラウザによって表示内容が制限されます。
Event オブジェクトは常に使うべき？
イベント情報が必要な場合のみ使用します。単純な onload / onunload では不要なことも多いです。
まとめ
onload：ページ読み込み完了時に処理を実行onunload：ページ離脱時に処理を実行Eventオブジェクトでイベント情報を取得できる- ブラウザによって
Eventの扱い方が異なるため注意
