JavaScript/onloadイベント

---

Total: 21229 / Today: 1 / Yesterday: 1

onload時のイベント登録方法

bodyタグにonload要素を入れてonload時の処理を実行するのもいいけど、これだと複数指定することができないため、複数指定したい場合そこから、別の関数を呼び出したり、別のスクリプトライブラリを使用するときに競合が起きやすい。そこで、window.onload = function(){}を用いる。

ここのページでは、onload="init();"を実装する方法についてまとめる。

通常の方法

var __onload_save = window.onload; // 複数回同一の処理を実行しないようにするためにフラグを立てておく
window.onload = function() {
	if (__onload_save) __onload_save();
	init(); //　onload時に実行したい関数を入れる
}

同様にページから出るとき処理は、window.unloadで行う。

var __onunload_save = window.onunload; // 複数回同一の処理を実行しないようにするためにフラグを立てておく
window.onunload　= function() {
	if (__onunload_save) __onunload_save();
	close(); //　ページから出るときに実行したい関数を入れる
}

fastinitを用いたイベント登録方法

fastinit.jsは、onload時のイベント登録の高速化に特化したスクリプトで、IEではscriptタグを生成して実行、それ以外では、readyStateイベントを利用してonload時の処理を高速化している。

FastInit.addOnLoad(init);

カンマ区切りでinit1,init2,..のように複数の関数を入れることができる。

※unloadは使えない。

活用事例として、swfObjectで使われている。

各フレームワークの場合

prototype.jsの場合

prototypeの場合、イベントの割り当てに関する処理はすべてEvent.observeで統一されている。

Event.observe(window, 'load', function() {
	init();
});

unloadの場合は、

Event.observe(window, 'unload', function() {
	close();
});

dojoの場合

dojo.addOnLoad(function(){
	init();
});

unloadの場合は、

dojo.addOnUnload(function(){
	close();
});

jQueryの場合

jQueryの場合は、簡単

$(function(){
	init();
});

だけ。ただし、安定動作させる場合は以下のようにする。

$(document).ready(function(){
	init();
});

また、unload時の処理は、

$(window).unload(function(){
	close();
});

と、ほかのフレームワークと比べて統一性がとれてないので注意。

uupaa-jsの場合

window.myHandleEvent = function(evt) { // この場合のメソッド名は "handleEvent" 以外でもOK
	init();
};

---

Last Modified: 2010-09-21 19:06:00