デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

イベント(2)

概要

動的な要素にも利用できるイベント構文

前回紹介した初心者向けのイベント構文では、動的な要素に対応できませんでした。動的な要素にイベントを設定するためにはonメソッドを利用します。構文が少し複雑ですが、覚えるようにしましょう。

解説

onメソッドを利用したイベントの設定

動的な要素にイベントを設定できるonメソッドの構文は以下の様に少し複雑です。

イベントの構文
調査範囲.on(イベント名, セレクタ, イベントで実行したい処理)
※調査範囲はjQueryオブジェクトにしないといけません。
※イベント名とセレクタは文字列(クォートで囲む)で指定します。
※イベントで実行したい処理はfunctionで設定します。

オブジェクトとして指定する「調査範囲」が気になりますが、まずはonメソッドの引数の設定について説明していきます。まず「イベント名」ですが、ここで利用するイベントを指定します。設定できるイベントはリファレンスで紹介している、マウスイベントのclickからロードイベントのreadyまで(ただしhoverとtoggleは除く)です。注意点としては、文字として指定するためクォートで囲み文頭のカンマと文後の()は必要ありません。例:.click() → "click"

「セレクタ」にはイベントを利用したい要素を指定します。jQueryオブジェクトにする必要はなく、文字列として指定するためクォートで囲むことに注意して下さい。最後の「イベントで実行したい処理」は初心者向けの構文と同じです。イベントが発生したら実行したい処理をfunctionで指定します。

調査範囲について(1)

動的な要素(プログラムで後から追加された要素)に対応するため、onメソッドはイベントが発生するごとにhtmlの構成をチェックします。その結果、処理の負荷が高く、あまり良くありません。そのためチェックする範囲を指定して負荷を下げる工夫がされました。それが「調査範囲」です。そのため、onメソッドは調査範囲外で発生したイベントには反応しません(後ほどサンプルで紹介します)。

onメソッドのサンプル

前回紹介したサンプル(event/02.html)でdiv要素をクリックしても文字が表示されなかったことを再度確認して下さい。これは、初心者向けのイベント構文では動的に追加された要素にイベントが設定できないためです。

$("div").click(function (){
	$("div").text("click!");
});
$("<div>").appendTo("body");

ではonを利用したサンプル(event2/01.html)を開いてソースを確認して下さい。初心者向けの構文と入れ換えに、以下のようにonメソッドでイベントが設定されています。それ以外は初心者向けのevent/02.htmlと同じです。

$("body").on("click", "div", function (){
	$("div").text("click!");
});
$("<div>").appendTo("body");

まず調査範囲はbody要素を指定しました(今回はbodyしか要素がないので)。調査範囲はjQueryオブジェクトにする必要があるため$( )を利用して下さい。第1引数にはイベント名を指定するので、サンプルでは「click」を指定しました(文字列で指定するのでクォートを忘れないで下さい)。

そしてセレクタで「div」を指定して、div要素がクリックされた時に処理を実行するようにしました。ここも文字列として指定するためクォートを忘れないでください。最後のfunction部分はevent/02.htmlと同じです。

結果として、サンプルevent2/01.htmlではdiv要素をクリックするとdiv要素内に「click!」と表示され、プログラムで後から追加された要素にもイベントが設定できることが確認できます。

調査範囲について(2)

調査範囲の機能が確認できるサンプルを用意しました。サンプル(event2/02.html)のソースを開いて、body内に2つのspan要素があり、それぞれdiv要素を含んでいることを確認して下さい。ポイントとして上のspan要素にはid属性でtestと設定されています。

<span id="test"><div></div></span>
<br>
<span><div></div></span>

jQueryでは以下の部分に着目して下さい。調査範囲のセレクタで「id属性がtestのspan要素」と設定されています。そしてクリックされた時の処理には、アラートで「click!」と表示するように設定しました。

$("span#test").on("click", "div", function (){
	alert("click!");
});

結果として、調査範囲(id属性がtestのspan要素)内にある「上のdiv要素」をクリックするとアラートが表示されますが、調査範囲外の「下のdiv要素」はクリックしてもアラートがでません。これでonメソッドが調査範囲内のイベントしか調査していないことが確認できます(調査範囲が狭いので、そのぶん負荷が軽いのです)。

初心者向けのイベント構文との使い分け

プログラムで後から追加された要素にもイベントを設定したい時だけonメソッドを利用して、それ以外のケースでは初心者向けの構文を利用すれば良いでしょう。

ちなみに初心者向けの構文は最初に1回しかチェックしないため負荷は軽いです(プログラムによって追加されたり削除されたりしないことが前提なので、イベント発生ごとにチェックする必要はないのです)。

メモ

イベント・ハンドラ・アタッチメント

ここでイベントに関連する用語を補足しておきます。

ハンドラ(handler)
必要に応じて実行されるプログラムのこと。jQueryではこのプログラムをfunctionで設定します。
イベントによって実行されるハンドラのことをイベントハンドラと呼びます。
→参考:IT用語辞典「ハンドラ

例えば本家サイトのclickメソッドの構文は「.click( handler(eventObject) )」と記述され、引数部分にhandlerの文字が確認できます。

今回紹介したonメソッドはリファレンスでは「イベントハンドラアタッチメント」の項目で紹介されています。ハンドラに関しては上記で説明したとおりです。アタッチメントはアタッチ(attach)の名詞形で「付ける」とか「結びつける」の意味です。なのでイベントハンドラアタッチメントの説明は以下の様になります。

イベントハンドラアタッチメント(Event Handler Attachment)
指定した要素に、イベントが発生した時に実行するハンドラ(function)をアタッチ(付加)するメソッドです。だからonメソッドの引数にイベント名とfunctionを設定するわけです。

初心者向けの構文とイベントハンドラアタッチメントの関係

前述のイベントハンドラアタッチメントの説明は、初心者向けの構文で説明したclickメソッドにも当てはまると思います。実際、カテゴライズの都合で分けてあるだけでclickメソッドもイベントハンドラアタッチメントとだと思います。

というかclickメソッドなど初心者向けのメソッドはイベントハンドラアタッチメントのonメソッドを簡略化したもので、本家サイトのclickメソッドのページでも以下の様な記述があります。

This method is a shortcut for .on( "click", handler )

上記で引用したonメソッドの構文と、このページで紹介したonメソッドの構文の引数の部分を比較してください。引用の方は引数が2つ(イベント名/handler)しかありません。これは覚えなくても良いのですが、onメソッドのbindの構文で動的な要素に対応していません。そのため初心者向けの構文は動的な要素に対応していないのです。まとめると以下の様になります。

初心者向け構文とイベントハンドラアタッチメントの関係
構文の複雑なイベントハンドラアタッチメントを簡単に利用できるようにしたのが初心者向けの構文。
このとき動的な要素に対応していない「onメソッドのbindの構文」を採用したため(初心者向けゆえに調査範囲を含まない簡単な構文の方を採用したのでしょう)、
初心者向けの構文はすべて動的な要素に対応していません。

イベントの歴史

リファレンスのイベント目次:イベントハンドラアタッチメントではonメソッドと同じカテゴリに「bindメソッド」「liveメソッド」「delegateメソッド」が紹介されていますが、これらは覚えなくてもOKです。

jQueryが登場した頃にはbindメソッドと初歩的なイベント構文しかありませんでした。しかしbindメソッドは動的な要素に対応しておらず、高度なコンテンツを作成できませんでした。

そこでv1.3でliveメソッドが追加されることになりました。しかし、これはイベントが発生する度にhtml内の要素すべてを調査するため、負荷が高かったのです(負荷が高いので現在では廃止されています)。

そのためv1.4.2で調査範囲を指定できるようにして負荷を軽くしたdelegateメソッドが登場しました。

このように進化の過程で複数のイベントハンドラアタッチメントが登場したため、v1.7でonメソッドにまとめられました。ですのでonメソッドだけを覚えておけばOKなのです。