##1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「loadイベント」について記載する。
##2. loadイベントは？
###概要
loadイベントとは、
関連付けされた要素を読み終わったときに発生するイベントのこと。
画像を含むページが完全に読み込み終わったことを検知して、
何らかの処理を実行したいときに使用される。
###構文
index.js
window.onload = function () {
// イベントハンドラ(イベント時に発生してほしい処理)
};
・window:windowオブジェクト
・onload:ページが読み込まれた時のイベントハンドラ名
##3. 例題
###内容
:::note warn
windowオブジェクトのloadイベント発生したタイミングで、コンソールに'loadイベント発生'と出力されるプログラムの作成
:::
※windowオブジェクトは、ブラウザオブジェクトの階層構造のトップ
###実践前のチュートリアル
実践に入る前に、完成形を先に表示しておく。
###マークアップ ブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>
今回のHTMLファイルはJavaScriptファイルを読み込むだけにする。
###JavaScriptの記述 次にJavaScriptを仕上げていく。
index.js
window.onload = function () {
console.log('loadイベント発生');
};
上記構文に関して、順を追って解説していく。
####window.onload = function ()
:::note warn
ページを読み込み終わった際に発生する関数を作成。
:::
####console.log('loadイベント発生');
:::note warn
ページを読み込み終わった際の、出力される文字列の記述。
:::
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
一瞬ではあったが、ページを読み込み終わった際にコンソールへ文字列を出力することができた。
##4. おわりに
次項:【JavaScript】イベント・イベントハンドラ⑤ 「addEventListenerメソッド」に続く。