JavaScript: loadイベントとwindow.onload = function(){}

初心者向けの説明として、 「window.onload = function(){ 処理内容 };」はおまじないとして書いておく、 と言う場合があります。

確かに初心者のうちはそれでもいいのでしょうが、ある程度慣れたら、 根拠を持って記述できるようになりたいものです。

このページでは、「window.onload = function(){ 処理内容 };」をおまじないではなく、 根拠を理解した上で記述できるように説明してみたいと思います。

loadイベントとは

まず load イベントについて説明します。
load イベントとは、関連付けられた要素が、読み込み終わった時に発生するイベントです。

関連付けられた要素として、例えば div 要素であったり、img 要素であったり、body 要素等の いろいろな要素があります。

ここで、img 要素が読み込み終わった時(load イベント発生時)のイベントハンドラを設定してみます。 対象となる img 要素の id="startImage" とし、2通りの方法で記述してみます。
  1. onload プロパティを使う方法
  2. addEventListner() を使う方法

1. onload プロパティを使う方法

まずは、「要素オブジェクトの onload プロパティにイベントリスナーを設定する方法」から見ていきます。


// img要素オブジェクトを取得
var img = document.getElementById('startImage');

// イベントハンドラを設定
img.onload = function(){ 処理内容 };

ある要素の load イベントにイベントハンドラを設定するには、次のような書式になります。

要素オブジェクト.onload = function(){ 処理内容 };

2. addEventListener() を使う方法

次は 「addEventListener() を使ってイベントリスナーを設定する方法」を見ていきます。


// img要素オブジェクトを取得
var img = document.getElementById('startImage');

// イベントハンドラを設定
img.addEventListener('load', function(){ 処理内容 });

ある要素の load イベントにイベントハンドラを設定するには、次のような書式になります。

要素オブジェクト.addEventListener('load', function(){ 処理内容 });

windowオブジェクトとは

windowオブジェクトとは、ブラウザが最初から用意してくれているオブジェクトで、 DOMの中でも最上位に位置するオブジェクトです。HTML文書全体を指すオブジェクトとして使用します。

ですから、HTML文書全体の読み込み完了時( load イベント発生時)のイベントハンドラを設定する場合は 次のように記述します。

// onload プロパティを使う方法
window.onload = function(){ 処理内容 };
// addEventListener() を使う方法
window.addEventListener('load', function(){ 処理内容 });

上の2つのうち、最初の記述方法がいわゆるおまじないといわれているのと同じです。

つまり、おまじない「window.onload = function(){ 処理内容 };」とは、 HTML文書全体の読み込み完了時( load イベント発生時)のイベントハンドラを設定しているだけです。

ですから、上の「onload プロパティを使う方法」でなく、 下の「addEventListener() を使う方法」で記述しても一緒です。

古いバージョンのIEではaddEventListner()が使用できなくて、「window.onload = ...」の形式が使われていました。

しかし、現在ではaddEventListner()が普通に使えますので、 これからはaddEventListner()を使う方法が多くなるでしょう。

現在JavaScriptを習得中の人にはaddEventListner()の方をおすすめします。

JavaScript入門