ここでは、onload イベントで呼び出されるイベントハンドラを追加登録を行うサンプルスクリプトを掲載しています。
スポンサーリンク
サンプルスクリプト
以下のスクリプトを、head タグ内で実行すると、ページロード時に alert ダイアログが出力されます。
/*
* 追加するイベントハンドラ
*/
var eventFunc = function() {
alert('add event handler');
};
if(window.addEventListener) {
// W3C DOM イベントモデルサポートブラウザ
// FireFox, Chrome, Safari, Opera, IE9 ～
window.addEventListener("load", eventFunc, false);
//alert("window.addEventListener supported");
} else if(window.attachEvent){
// ～ IE8
window.attachEvent("onload", eventFunc);
//alert("window.attachEvent supported");
} else {
// Other・・・
// もともと登録されているonload イベントがあれば上書きされてしまう
window.onload = eventFunc;
//alert("not supported");
}
静的な onload 属性
次に、onload 属性が元々設定されていた場合にどのような動きとなるかを確認します。上記の Javascript が head タグ内で実行された上で、body タグの onload 属性が設定されていた場合の確認です。
<body onload="alert('static onload event');">
だめよ～だめだめ（再ブームの兆し）
</body>
実行順序は、body タグの onload 属性の記述が先に実行され、ついで window.addEventListener によって追加登録された イベントハンドラが実行されます。
ポイントとしては、もともと静的に記述されている onload イベントも正常に実行される点と、複数のイベントハンドラが登録できると言うことでしょうか。なお、同一イベント（関数）であっても登録回数分コールされます。上書き登録はされません。
今回のサンプルでは、window.onload にイベントを追加登録しましたが、button.onclick 等任意のオブジェクトにイベントを追加することももちろんできます。
ｊQuery は素晴らしいです。