addEventListener(), attachEvent() を使ってaddLoadEvent()
addLoadEvent() は少し古い技術なので、DOM操作で使われるaddEventListener()、attachEvent() を利用して書き換えてみました。
function addLoadEvent(func) {
if(typeof window.addEventListener == 'function'){ // addEventListenerが使えるなら
window.addEventListener('load', func, false);
return true;
} else if(typeof window.attachEvent == 'object'){ // attachEventが使えるなら(IE用)
window.attachEvent('onload', func);
return true;
}
var oldonload = window.onload; // どちらも使えないなら
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addEventListener() と attachEvent()
addEventListener() と attachEvent() は、DOMで扱われるノードに対するイベント(マウスクリックとか)をトリガーとして、メソッドを追加します。
addEventListener() はW3Cで定義された標準メソッドで、attachEvent() はIEの独自拡張です。IEは addEventListener() を利用することができません。
attachEvent() は追加されたメソッドの処理順がめちゃくちゃなんですが、window.onload よりは使い勝手がよいので採用しました。
window.onloadだけで作られたaddLoadEvent()との違い
まず、次のJavaScriptコードを実行してみてください。
<script type='text/javascript'>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function hello(){
alert('Hello, World!');
}
function yes(){
alert('Yes, my master.');
}
addLoadEvent(hello);
window.onload = yes;
</script>
上記コードを実行すると、yes() が実行され、hello()が実行されない結果に終わります。
addEventListener() で window.onload 追加したメソッドが window.onload = yes;
によって上書きされてしまっているのです。
上書きされないようにするためには addLoadEvent() を addEventListener() を利用したコードに書き換えます。
<script type='text/javascript'>
function addLoadEvent(func) {
if(typeof window.addEventListener == 'function'){
window.addEventListener('load', func, false);
return true;
} else if(typeof window.attachEvent == 'object'){
window.attachEvent('onload', func);
return true;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function hello(){
alert('Hello, World!');
}
function yes(){
alert('Yes, my master.');
}
addLoadEvent(hello);
window.onload = yes;
</script>
これで hello(), yes() 両方の関数が有効になりました。
addEventListener() は window.onload に関数を格納しているわけではないので、window.onload = yes;
が実行されて機能が上書きされる心配はありません。
どんな状況で addLoadEvent() が役に立つのか
- 他人が書いたコードに機能を追加するとき
- Proxomitron, Greasemonkey 等で既存サイトに機能を追加するとき
# 逆から見れば、一からJavaScriptコードを書くときには、addLoadEvent() を使わず addEventListener() を使った方がわかりやすいかもしれません。
ラベル: JavaScript, ユーザー定義関数