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() を使った方がわかりやすいかもしれません。