画面全体でクリックイベントを監視する

2007/1/6 23:34

この記事ではアフィリエイト広告を利用しています。

JavaScriptアプリケーションを作るときに最近よく使うテクニックが、「個々のHTML要素ごとにクリックイベントを監視せずに、html要素(もしくはbody要素)のみでクリックイベントを監視する」という方法です。これは「まるごとPerl!」の「livedoor Readerのしくみ」で紹介されていたものです。

Amazon.co.jp：まるごとPerl! Vol.1: 本: 小飼弾,宮川達彦,伊藤直也,川合孝典,水野貴明

例えば「飲食店検索 – この辺で」では次のようにクリックイベントを監視しています。

window.onload = function() {
 document.getElementsByTagName("html")[0].onclick = HOTPEPPER.clickObserver;
 HOTPEPPER.onload();
}

HOTPEPPER.clickObserver = function(event) {
 event = event || window.event;
 var target = event.target || event.srcElement;
 if (target.id.match(/^(shop|shopimage)_([0-9]+)$/)) {
  var pre = RegExp.$1;
  var num = RegExp.$2;
  if (pre == "shop") {
   HOTPEPPER.openInfoWindow(num, target);
  }
  else if (pre == "shopimage") {
   HOTPEPPER.openInfoWindow(num, document.getElementById("shop_" + num));
  }
  var childNodes = document.getElementById("image-list").childNodes;
  for (var i = 0; i < childNodes.length; i++) {
   if (childNodes[i].id == "shopimage_" + num) {
    childNodes[i].className = 'on';
   } else{
    childNodes[i].className = '';
   }
  }
 }
 else if (target.className == 'close') {
  HOTPEPPER.close();
 }
}

この場合はhtmlタグにonclickを設定してします。クリックイベントが発生するとHOTPEPPER.clickObserverが呼び出されます。そして、イベントが発生した要素(どのエレメントがクリックされたか)を取得し、その要素のid属性の値やclass名をパターンマッチングすることで処理を振り分けています。

この方法は動的にHTML要素が生成される場合に非常に有効です。機能追加なども楽です。もちろん処理の振り分けにはその他の属性も利用できるので、非常に柔軟なイベント処理ができるようになります。可能性は無限大です。