イベント

JavaScript を用いて動的なウェブサイトを構築するときには、例えばボタンを押したときに何かをする、といったことをしたい場合があります。

例えば次のボタンをクリックすると、"Hello!" というポップアップメッセージが表示されます。

こうしたことをしたい場合にはどうしたらよいでしょうか。

ここではイベント処理の基礎について説明し、実用的なイベント処理についても簡単に説明します。

基本的なイベント処理

具体例をあげてイベント処理について説明します。

上の例、つまり「ボタンを押すとポップアップが表示される」という処理はどのようにすればよいでしょうか。

簡単にクリックイベントのイベントハンドラを設定するには、HTML 要素の onclick 属性にイベントハンドラを設定する、あるいは、 HTML 要素の onclick プロパティに関数オブジェクトを設定します。

onclick 属性の設定

HTML の onclick 属性にクリックをしたときのコードを記述すれば、クリック時にそれが実行されます。

例えば、まず button1a_click という関数を次のように定義しておきます。

function button1a_click(){
	alert('Hello! (A)');
}

そこで HTML を次のように記述します。

<button onclick='button1a_click();'>Hello! (A)</button>

すると、クリックしたときに button1a_click が呼び出されるというわけです。

onclick プロパティの設定

もうひとつの方法は onclick プロパティに関数オブジェクトを設定する方法です。

この場合、まず HTML を記述します。

<button id='button1b'>Hello! (B)</button>

そこで JavaScript で次のように onclick プロパティに定義済みの関数を指定します。

function button1b_click(){
	alert('Hello! (B)');
}

var btn1b = document.getElementById('button1b');
btn1b.onclick = button1b_click;

これによって、クリックされたときに onclick に設定された関数オブジェクトが呼び出されます。

その他のイベント

上の例ではクリック時のイベントハンドラである、onclick を例にとり説明しました。

その他、マウスオーバー時の onmouseover、ダブルクリック時の ondblclick、変更時の onchange など、 HTML 要素に応じた各種イベントが定義されています。

イベントハンドラの戻り値の基本

イベントハンドラの戻り値の基本的な考え方は、false を返したら既定の動作をキャンセルする ということです。

例えば、a タグはご存知の通り、クリックしたら href で指定したページへ移動します。これが既定の動作です。

しかし a タグの onclick ハンドラで false を返せばその "既定の動作" (すなわちページを移動する) をキャンセルします。

具体的には次のようにすれば、confirm でキャンセルすれば (confirm が false を返すので) href で指定した URL へ移動しません。

<a href="http://www.google.com/" 
  onclick='return confirm("Are you sure?");'>
    Google を開く？</a>

W3C イベントモデルとマイクロソフトイベントモデル

イベント処理で標準化が決められているのは、W3C DOM Level 2 のイベントモデルです。

しかし残念ながらマイクロソフト社の Internet Explorer ではバージョン 9 になって、やっと DOM Level 2 のイベントモデルのサポート。それ以前の Internet Explorer では "IE Event Model" あるいは "マイクロソフトイベントモデル" というものをサポートしており、互換性がありませんでした。

このため、インターネット上に公開するウェブアプリケーションでは主に W3C イベントモデルと IE イベントモデルの両方をサポートする必要があります。

当面、IE を含めた各種ブラウザをサポートするのはインターフェイスが違うので大変だ、と覚えておけばよいと思いますが、具体的にどうしたらよいか興味がある方は次の資料等をご覧ください。

» 「イベント処理の基本」Web/DB プログラミング徹底解説

イベント処理。実際、どうしたらいいの？

実際のところは、ウェブアプリケーションを開発する場合には、ブラウザの違いを吸収するライブラリを利用し、そのライブラリ上のメソッドを利用するのが良いでしょう。

今最もシェアの多いライブラリのひとつとして jQuery が挙げられます。

jQuery では次のような簡単な統一された構文で、各種ブラウザに対応することが可能です。

$('#button1').click(function(){
	alert($('#textbox1').val());
});