Backup of blog/2008-07-15 (1) Back

---

Back to History list

#navi(../)
*onclickはもう古い？ [#s0793174]
今まで
 <button onclick="action();">ボタン</button>
 <script type="text/javascript">
 function action(){
  alert("ボタンが押されました。");
 }
 </script>
みたいなHTMLの書き方をしてきたが、Ajax化が当たり前な今、もうこの買い方はスマートではないらしい。ちまたでは、イベントリスナという技法が話題になっている。よく目にする例ではGoogleMapsがそうだ。onclickというソースは無い。で、このソースを代わりにどう書くか？

[[ここ>http://www.kawaz.jp/pukiwiki/?JavaScript%A5%E1%A5%E2]]の資料によると、ヘッダー内に以下のようなソースを記述した上で
 function addEventListener(target, type, func) {
   if(target.attachEvent) {
     target.attachEvent("on" + type, func);
   } else if(target.addEventListener) {
     target.addEventListener(type, func, true);
   } else {
     //イベントリスナが使えない場合は on○○ 属性を上書きで妥協（今時あんまし無いと思うが
     target["on" + type] = func;
   }
 }
HTMLがこうだったとすると
 <button id="action">ボタン</script>
さきほどのヘッダーのスクリプト内に
 addEventListner(action, 'click', function(){alert("ボタンが押されました");});
と記述するらしい。

こうすると、HTMLはかなりすっきりする。