onclickはもう古い?

今まで

<button onclick="action();">ボタン</button>
<script type="text/javascript">
function action(){
 alert("ボタンが押されました。");
}
</script>

みたいなHTMLの書き方をしてきたが、Ajax化が当たり前な今、もうこの買い方はスマートではないらしい。ちまたでは、イベントリスナという技法が話題になっている。よく目にする例ではGoogleMapsがそうだ。onclickというソースは無い。で、このソースを代わりにどう書くか?

ここの資料によると、ヘッダー内に以下のようなソースを記述した上で

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はかなりすっきりする。これで、さきほどの最初のHTMLと同じ動作になる。

ちなみに、Dojo Toolkitを使う場合はこうなる。

dojo.connect(action,'onclick',function(){function(){alert("ボタンが押されました"););

こういう記述方法は似たような処理をするボタンなどで便利かもしれない。以下は、Lorelei Composerで使われている、ラジオボタンの代わりにボタンをハイライトさせるものである。クリックすると、クリックしたボタンが赤色になりそれ以外のボタンは白色になる。そして赤色になったボタン(選択されたボタン)のvalueをbtn_valueに代入するプログラムである。

	for(i=0; i<document.getElementsByName('button').length; i++) {
		var Button = document.getElementsByName('button').item(i);
		// 機能割り当て
		dojo.connect(Button,'onclick',function(){
			// ボタンの色を変える
			for(j=0; j<document.getElementsByName('button').length; j++) {
				var Item = document.getElementsByName('button').item(j);
			    if(this.value == Item.value) {
					Item.style.borderColor = "#FFCCCC";
					Item.style.backgroundColor = "#FFEEEE";
				}else{
					Item.style.borderColor = "#dedede";
					Item.style.backgroundColor = "#fff";
				}
			}
			document.getElementById('button_value').value = this.value;
		});
	}

ポイントとなるのは、name属性で配列化し、for文でおのおののボタンにスクリプトをその都度割り当てている点だろう。this.valueが使えるところがにくいね~ (^_-