特集:ASP.NET+jQuery

ASP.NETプログラマーのためのjQuery入門

山田 祥寛(http://www.wings.msn.to/
2009/02/27

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」を活用しよう


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間