ページが読み込まれたら処理を呼び出すonloadの書き方
ページが読み込まれたら何か処理を行わせる場合、<body onload="〜">のようにbodyタグにonloadを記述してスクリプトを呼び出すことは多いでしょう。例えば以下のようにページが表示されたらアラートダイアログを表示する、という場合にはbodyタグのonloadイベント部分にスクリプトを書く事になります(多くの場合は関数を呼び出して処理を行うはずです)。【
サンプル1を実行】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
</head>
<body onload="alert('JavaScript')">
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>
しかし、以前のページでも書いたようにHTMLファイル内にJavaScriptのコードが含まれるのは、好ましいことではありません。また、保守性の面からもHTMLファイルとJavaScriptファイルは分離した方がよいとも書きました。では、bodyタグにonloadを書いた場合と同様の処理を、どのようにして行えば良いのでしょうか。
bodyタグのonloadと同じ処理を行う場合にはwindowオブジェクトのonloadイベントハンドラを設定します。つまり
<body onload="alert('JavaScript')">
は
window.onload = function(){ alert('JavaScript') }
と書きます。
*1
function(){ 〜 }のようにfunctionの横に何の関数名も書かれていない場合は一時的な関数(無名関数/匿名関数)として処理されます。名前が指定されていないので複数ファイルを読み込んだ場合にも関数名の重複(衝突)による不具合を防ぐことができます。
実際のサンプルは以下のようになります。HTMLファイルとJavaScriptが分離されていても期待通りに動作するのが確認できるはずです。【
サンプル2を実行】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>
■スクリプトファイル (message.js)
window.onload = function() {
alert("JavaScript");
}
*1
なぜ、addEventListener()を使ってイベントを追加しないのか、と思う人もいるでしょう。理由の1つとしてはaddEventListener()はInternet Explorer 6には実装されておらず使えないためです。もちろん似たような処理を行うattachEvent()があるので、これらをエラーのないように書くという方法もあります。しかし、どちらもサポートしていないブラウザではエラーになってしまうので、window.onloadのようにオブジェクト対してイベントハンドラを設定する方が現時点では無難である、という理由によります。