WEB ページの onLoad イベントのまとめ

正しくイベントを追加したい場合

もっとも確からしい記述です。

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// 関数 (1)
// *************************************************
function load_001() {
	alert("001");
}

// *************************************************
// 関数 (2)
// *************************************************
function load_002() {
	alert("002");
}


// *************************************************
// IE 用
// *************************************************
if (window.attachEvent){
	window.attachEvent('onload', load_001);
	window.attachEvent('onload', load_002);
}
// *************************************************
// IE 以外
// *************************************************
else {
	window.addEventListener('load', load_001, false);
	window.addEventListener('load', load_002, false);
}

</SCRIPT>

</HEAD>
<BODY>

</BODY>

</HTML>

IE 2 -> 1
Firefox、Opera 1 -> 2

IE は、同じ関数でも追加されますが、Firefox と Opera は、同じ関数は追加されないようです

※ 但し実行順序から考えると、同じ関数の追加は Firefox は無視。Opera は以前のを削除して追加のようです

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// 関数 (1)
// *************************************************
function load_001() {
	alert("001");
}

// *************************************************
// 関数 (2)
// *************************************************
function load_002() {
	alert("002");
}


// *************************************************
// IE 用
// *************************************************
if (window.attachEvent){
	window.attachEvent('onload', load_001);
	window.attachEvent('onload', load_002);
	window.attachEvent('onload', load_001);
}
// *************************************************
// IE 以外
// *************************************************
else {
	window.addEventListener('load', load_001, false);
	window.addEventListener('load', load_002, false);
	window.addEventListener('load', load_001, false);
}

</SCRIPT>

</HEAD>
<BODY>

</BODY>

</HTML>

一般的には HEAD に書く事になっていますが

スクリプト要素はどこに書いても正常に処理されるはずです

<BODY>
.
.
.
<SCRIPT type="text/javascript">
// *************************************************
// IE 用
// *************************************************
if (window.attachEvent){
	window.attachEvent('onload', load_001);
}
// *************************************************
// Mozilla 用
// 最後の false は、イベントの発生順序。通常は false 以外は指定しません
// *************************************************
else {
	window.addEventListener('load', load_001, false);
}
</SCRIPT>
</BODY>

既にどこかに、以下のような処理が書かれている場合は、注意が必要です。

古い記述方法( 非推奨 )

<BODY onLoad='load_001();'>

または、

<SCRIPT language="javascript" type="text/javascript">
	window.onload = load_001;
</SCRIPT>

上書きされるイベント

IE と Firefox では、以下のコードは load_002 しか実行されません
( Opera は、どちらも実行されます )

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// 関数 (1)
// *************************************************
function load_001() {
	alert("001");
}

// *************************************************
// 関数 (2)
// *************************************************
function load_002() {
	alert("002");
}

// 古いイベント記述(1)
window.onload = load_001;

</SCRIPT>

</HEAD>
<!-- 古いイベント記述(2) -->
<BODY onLoad='load_002();'>

</BODY>

</HTML>

さらに、IE と Firefox では、以下のコードは load_003 しか実行されません
( Opera は、load_002 と load_003 が実行されます )

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// 関数 (1)
// *************************************************
function load_001() {
	alert("001");
}

// *************************************************
// 関数 (2)
// *************************************************
function load_002() {
	alert("002");
}

// *************************************************
// 関数 (3)
// *************************************************
function load_003() {
	alert("003");
}

// 古いイベント記述(1)
window.onload = load_001;

</SCRIPT>

</HEAD>
<!-- 古いイベント記述(2) -->
<BODY onLoad='load_002();'>

</BODY>

</HTML>

<SCRIPT type="text/javascript">

	window.onload = load_003;

</SCRIPT>

単純に処理を追加したい場合

イベントでは無く、ドキュメントの最後に直接書きます

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// 関数 (1)
// *************************************************
function load_001() {
	alert("001");
}

// *************************************************
// 関数 (2)
// *************************************************
function load_002() {
	alert("002");
}

// *************************************************
// 関数 (3)
// *************************************************
function load_003() {
	alert("003");
}

if (window.attachEvent){
	window.attachEvent('onload', load_001);
}
if (window.addEventListener){
	window.addEventListener('load', load_001, false);
}

</SCRIPT>

</HEAD>
<BODY onLoad='load_002();'>

</BODY>

</HTML>

<SCRIPT type="text/javascript">

	load_003();

</SCRIPT>

IE、Opera 3 -> 2 -> 1
Firefox 3 -> 1 -> 2

ローディング中と、ロード後の処理

ローディング中と、ロード後では実行できる JavaScript の意味あいに違いがあります。
ローディング中は、document.write で HTML を書き出すとその位置にコンテンツが作成されます
ロード後に document.write は使用できません。同様の処理として innerHTML にコンテンツを
セットする事が可能ですが、document.write によりコンテンツ作成能力は低下します。
( innerHTML は万能では無く、一部思い通りにはなりません )

しかし、すべてのロードが完了しないとうまくいかない場合もありますし、先に処理を記述する必要がある場合、
後方のコンテンツに対して処理を行いたい場合は、onload イベントを使用する以外に選択肢はありません

イベントを関数として定義せずに、イベント定義内で記述する

こういう記述が可能ですが、IE とそれ以外で処理内容もクロスブラウジングする必要があって
比較的処理が短い場合にのみ有効な使い方かもしれません。

内部の処理が全く同じであれば、二度書く事になりますし、長い場合は変更する場合に広い
範囲を確認する必要が出てくるので、効率が悪くなります

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>onload イベント</TITLE>

<SCRIPT type="text/javascript">

// *************************************************
// IE 用
// *************************************************
if (window.attachEvent){
	window.attachEvent('onload', 
		function() {
			alert("001");
		}
	);
}
// *************************************************
// IE 以外
// *************************************************
else {
	window.addEventListener('load', 
		function() {
			alert("001");
		},
		false
	);
}

</SCRIPT>

</HEAD>
<BODY>

</BODY>

</HTML>