特集：ASP.NET＋jQuery ASP.NETプログラマーのためのjQuery入門 山田 祥寛（http://www.wings.msn.to/） 2009/02/27
Page1 Page2 Page3 Page4 Page5

jQueryにおけるイベント処理

　JavaScriptにおけるイベント処理には、1つ大きな問題がある。そう、いまさらいうまでもないが、Internet Explorerとそれ以外のブラウザとで、イベントにかかわる実装が大きく異なっているのだ。これはイベント処理がJavaScriptプログラミングの中核であることを考えれば、なかなかに厄介な問題で、これまでにもさんざん悩まされてきたという開発者の方は少なくないはずだ。

　もっとも、昨今ではこの非互換性もそれほど問題とはならなくなりつつある。というのも、多くのJavaScriptライブラリがクロス・ブラウザで動作するイベント処理を提供しているためである。そして、これはjQueryでも例外ではない。

■イベント処理の基本

　例えば、<p>タグの上にマウスを乗せたら背景色を黄色に、外したら白色に、というコードならば、リスト6のように記述することが可能だ。

<p>こんにちは、jQuery！</p> <p>さようなら、クロス・ブラウザ問題！</p> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('p')   .mouseover(     function() { $(this).css('backgroundColor', 'Yellow');})   .mouseout(     function() { $(this).css('backgroundColor', 'White');}); </script>

リスト6 マウス・オーバー／アウト時に<p>タグの背景色を変更するためのコード（Event.aspx）

　jQueryでイベントリスナを登録するには、mouseoverメソッドやmouseoutメソッドのように、“＜イベント名＞メソッド”で行う。＜イベント名＞には、click、dblclick、keydown、keypress、keyup、mousedown、mouseup、mouseover、mouseout、mousemove、submit、focus、loadのような名前を指定できる。

　＜イベント名＞メソッドには、引数としてイベント発生時の処理を表す匿名関数を指定するだけだ。

　「■補足：$()関数のさまざまな構文」でも見たように、$()関数は、標準的なDOM ElementオブジェクトをjQueryオブジェクトに変換するためのコードである。リスト6では、$(this)により、this（イベントの発生元）が表すElementオブジェクトをjQueryオブジェクトに変換している。イベントリスナの中では特によく利用する表現であるので、覚えておくと便利だろう。繰り返しであるが、「this.css(……)」のような書き方はできないので注意すること。

■そのほかのイベント関連のメソッド

　jQueryでは、イベント関連のメソッドとして、＜イベント名＞メソッドのほかに、以下の表のようなメソッドを公開している。ここでは、その中でも主要なものについて、サンプルを交えながら紹介しておこう。

メソッド名 概要 ＜イベント名＞(fnc) イベント発生時に処理fncを実行 bind(type [,data] ,fnc) イベントtype発生時に処理fncを実行 one(type [,data] ,fnc) イベントtype発生時に処理fncを1回だけ実行 unbind([type [,fnc]]) イベントtypeに関連付いた処理fncを無効化 ready(fnc) ドキュメントが読み込まれたタイミングで処理を実行 hover(fnc1, fnc2) mouseoverイベントで処理fnc1を、mouseoutイベントで処理fnc2を実行 toggle(fnc1, fnc2) クリックごとに処理fnc1、fnc2を交互に実行

表4 jQueryオブジェクトで使えるイベント関連の主なメソッド

（1）mouseover／mouseoutイベントリスナをまとめて定義する

　リスト6では、mouseover／mouseoutメソッドを使って、個別にイベントリスナを定義したが、多くの場合、mouseover／mouseoutメソッド（イベントリスナ）はセットで利用することが多い。mouseover／mouseoutイベントリスナを同時に設定するならば、hoverメソッドを利用した方がコードをいくらか短く記述できる。

　例えば、以下はリスト6をhoverメソッドで書き換えたものだ。

$('p').hover(   function() { $(this).css('backgroundColor', 'Yellow'); },   function() { $(this).css('backgroundColor', 'white'); } );

リスト7 リスト6をhoverメソッドで書き換えたコード

（2）ドキュメント読み込みのタイミングで処理を実行する

　jQuery固有のイベント機能として、ドキュメントが読み込まれたタイミングで処理を実行するreadyメソッドにも要注目だ。

　よく似たイベントとしてwindow.onloadイベントもあるが、こちらは「画像なども含むページ全体」の読み込みが完了したタイミングで発生する。しかし、多くのケースでは、画像の読み込みまで待たなくとも、文書自体さえ読み込まれていれば、処理を開始できる場合がほとんどだ。そのような場合には、readyメソッドを利用することで、画像読み込みを待つ必要がなくなるので、処理開始までの待ち時間を短縮できる。

　以下は、ドキュメント読み込みのタイミングでダイアログを表示するためのコードである。

$(document).ready(   function() {     window.alert('こんにちは、jQuery！');   } );

リスト8 ドキュメント読み込みのタイミングでダイアログを表示するコード

　ちなみに、readyメソッドはリスト9のように省略形（$()関数）で記述しても構わない。

$(   function() {     window.alert('こんにちは、jQuery！');   } );

リスト9 リスト8と同じ挙動のコード

（3）イベントリスナにパラメータ情報を渡す

　前述したように、基本的なイベントリスナの登録はclick、mouseoverのような＜イベント名＞メソッドを使えば十分だ。しかし、似たような処理を異なるイベントに適用したいという場合、処理を何らかのパラメータでもって切り替えたいということもあるだろう。そのような場合には、bindメソッドを利用するとよい。

　例えば、以下は、先ほどのリスト6をbindメソッドで書き換えた例だ。

$('p')   .bind('mouseover', { color: 'Yellow' }, listener)   .bind('mouseout', { color: 'White' }, listener); function listener(e) {   $(this).css('backgroundColor', e.data.color); }

リスト10 リスト6をbindメソッドで書き換えたコード

　bindメソッドでは「パラメータ名:値」のハッシュ形式で、イベントリスナに引き渡すべき引数を指定できる。ここでは、mouseover／mouseoutメソッドのそれぞれに対して、listenerイベントリスナをバインドし、それぞれcolorパラメータ（値は“Yellow”、“White”）を渡しているわけだ。渡された引数の情報は、Eventオブジェクト「e」のdataプロパティを経由して取得することができる。

　リスト10では、イベントリスナで行うべき処理があまりに単純であるため、かえってコードが冗長になった感もあるが、より複雑な（長い）コードになった場合にはbindメソッドを使う意味はよりはっきりしてくるはずだ。

　ちなみに、bindメソッドによく似たメソッドとしてoneメソッドがあるが、こちらはイベントが初めて発生した1回だけしか処理が実行されないという点が異なる。

　では最後に、jQueryベースのライブラリ「jQuery UI」を紹介する。

INDEX
	ASP.NET＋jQuery
	ASP.NETプログラマーのためのjQuery入門
	1．Visual Studio 2008でjQueryを利用するための準備
	2．jQuery 基本のキ／標準的なDOMとの比較／補足：$()関数のさまざまな構文
	3．メソッド・チェーン
	4．jQueryにおけるイベント処理
	5．jQueryベースのライブラリ「jQuery UI」を活用しよう

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）