Javascriptのイベントハンドラ設定方法

2007年5月7日

DOMやJavascriptを勉強しているとイベントハンドラの設定方法が色々とあってどの方法でやれば一番良いのかわからなくなってきたので、自分の覚書もかねてイベントハンドラの設定方法をまとめてみようと思います。

尚、サンプルはボタンを押すと”クリックされました”とアラートが出るだけのシンプルなスクリプトでご紹介します。

（X）HTMLの中に記述する方法

<form>
<input type="button" id="myButton" value="Click" onClick="alert('クリックされました');">
</form>

（X）HTMLの中でイベントハンドラを利用する方法で（X）HTMLとスクリプトの分離ができていないのであまり良い方法とはされていませんがシンプルな方法の一つです。

.onclickを使う方法

<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myButton").onclick = function () {
alert('クリックされました');
return false;
}
}
--></script>
<form>
<input type="button" id="myButton" value="Click">
</form>

（X）HTMLとスクリプトを完全に分離できる方法でのもっともシンプルな記述方法になります。しかし、一つの関数の中でイベントハンドラを記述するのであまりオブジェクト指向といえませんね。

addEventListenerを使う方法

<script type="text/javascript"><!--
function dispMsg() {
alert('クリックされました');
}
window.onload = function() {
document.getElementById("myButton").addEventListener('click', dispMsg, false);
}
--></script>
<form>
<input type="button" id="myButton" value="Click">
</form>

（X）HTMLとスクリプトを完全に分離できる方法になります。特徴としてはオブジェクト指向で様々な関数をaddEventListenerという関数で呼び出すことのできる方法です。しかしW3C推奨ブラウザのみに有効であって、IEでは使用できません。IEの場合はattachEventというIE独自のものがあるのでそれを利用します。attachEventの記述方法はイベントタイプにonをつけることとcaptureが不要な点がaddEventListenerとの違いになります。

クロスブラウザに対応したaddEventListenerを使う方法

<script type="text/javascript"><!--
function dispMsg() {
alert("クリックされました");
}
function addListener(elem, eventType, func, cap)
{
if(elem.addEventListener)
{
elem.addEventListener(eventType, func, cap);
}
else if(elem.attachEvent)
{
elem.attachEvent('on' + eventType, func);
}
}
function setMsg()
{
btn = document.getElementById("myButton");
addListener(btn, 'click', dispMsg, false);
}
addListener(window, 'load', setMsg, false);
--></script>
<form>
<input type="button" id="myButton" value="Click">
</form>

addEventListenerとIE独自に有効なattachEventを組み合わせて新たな関数を作り、それを利用したイベントハンドラの方法です。現時点ではこの方法が一番スマートだと言えます。

prototype.jsを利用したEvent.observeを使う方法

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
Event.observe(window, "load", setMsg, false);
function setMsg(){
Event.observe("myButton", "click", dispMsg, false);
}
function dispMsg() {
alert("クリックされました");
}
--></script>
<form>
<input type="button" id="myButton" value="Click">
</form>

ブラウザ間の差異を吸収するprototype.jsというライブラリの独自関数であるEvent.observeを使う方法です。これは先ほどのイベントハンドラの関数などをわざわざ作らなくてもprototype.jsの中でEvent.observeというイベントハンドラの関数を作ってくれているので簡単に利用することができます。他にもgetElementByIdなどを$()と省略できる関数などがあり非常に優れたライブラリです。僕は断然こっちをお勧めです。