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

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.on( )イベント発生時に実行する処理を設定します

構文

イベント発生時に実行する処理を設定します返値:jQueryオブジェクト
jQo.on( イベント名, function)ver1.7〜
調査範囲.on( イベント名, セレクタ, function)ver1.7〜
調査範囲.on( イベント名, セレクタ, object, function)ver1.7〜
調査範囲.on( object, セレクタ [,object] )ver1.7〜
調査範囲はjQueryオブジェクトにしないといけません。

機能

jQueryは進化の過程で多くのイベントハンドラアタッチメントが作成され、すこし混沌としてきました。そのためv1.7で、このonメソッドにまとめられました。

onメソッドは調査範囲(jQueryオブジェクトで指定)内にあるセレクタで指定した要素に、イベントが発生した時に実行するfunctionを設定します。設定できるイベントは左メニューのマウスイベント(click)〜ロードイベント(ready)※ただしhover,toggleは除くです。

第1引数にobjectオブジェクトを利用して、一度に複数のイベントを設定できます。

解説

イベント発生時に実行する処理を設定(bindメソッドの構文)

イベント発生時に実行する処理を設定します(動的な要素には未対応)
jQo.on( イベント名, function)ver1.7〜

onメソッドは引数にイベント名とfunctionを設定すると、bindメソッドと同じ機能になります。
サンプル(on/01.html)を開いてbody内にdiv要素があることを確認してください。jQueryは以下の様に記述され、onメソッドの引数にイベント名の「click」、そしてfunctionの「clickFunc」が設定されています。

$(function () {
	$("div").on("click", clickFunc);
});

onメソッドの引数に設定するfunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてイベント名で指定したイベントが発生したら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあります。

onメソッドに設定するfunctionの構文
function 任意の名前(イベントオブジェクト){
 イベント名で指定したイベントが発生したら実行したい処理
}

サンプルon/01.htmlで利用したclickFuncは以下の様になっており、アラートで「click」と表示します。

function clickFunc(eo){
	alert("click");
};

結果として、div要素をクリックするとアラートで「click」と表示されます。
functionの設定は無名関数を利用することが多いです。→サンプル(on/01b.html

$("div").on("click", function (eo){
	alert("click");
});

bindのメソッド構文では動的な要素に対応できません

bindメソッドの構文はシンプルで分かりやすいのですが、bindメソッド同様に動的な要素(プログラムで後から追加された要素)にはイベント発生時の処理を設定することができません。サンプル(on/02.html)を開いてbody内にbutton要素が1つあることを確認して下さい。

jQueryは以下の部分を最初に確認してください。この処理はサンプルon/01b.htmlと同じで、div要素がクリックされたらアラートで「click」と表示します。しかしbody要素内にはdiv要素がありません。

$("div").on("click", function(eo){
	alert("click");
});

div要素は以下のjQueryにより、buttonをクリックしたらappendToメソッドによりbody内に追加されます。

$("button").click(function(){
	$("<div />").appendTo("body")			
})

しかしbuttonをクリックして表示したdiv要素をクリックしても、onメソッド(bindメソッドの構文)で設定したfunctionは実行されずアラートは出ません。このdiv要素はプログラムによって後から追加した要素だからです。

イベント発生時に実行する処理を設定(delegateメソッドの構文)

イベント発生時に実行する処理を設定します(動的な要素にも対応)
調査範囲.on( イベント名, セレクタ, function)ver1.7〜

イベントハンドラアタッチの進化では、bindメソッドとdelegateメソッドの間にliveメソッドがありますが、onメソッドにliveメソッドの構文はありません。liveメソッドは処理に負荷が掛かるためv1.9で廃止されました。

delegateメソッドとonメソッドでは引数の順番が異なることに注意してください。delegateメソッドでは引数の順番が「セレクタ, イベント名, function」でしたが、onメソッドでは「イベント名, セレクタ, function」と、セレクタとイベント名の順番が逆になっています。
混乱しないようにdelegateメソッドは覚えずにonメソッドだけを覚えるようにしましょう。

サンプル(on/03.html)を開いてbody内の構成がon/02.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、以下の様にonメソッドの引数が変更されているだけです。この構文はdelegateメソッドと同じ機能をもつので、動的な要素にも利用することができます。

$("body").on("click", "div", function(eo){
	alert("click");
});

bindメソッドの構文と比較すると、第2引数にセレクタが設定されただけです。最初のjQueryオブジェクトのセレクタにはbody要素が設定され、これは調査範囲になります(次項で説明します)。

実際にbuttonをクリックして、表示したdiv要素をクリックしてもアラートが表示されることを確認してください。このようにdelegateメソッドの構文であれば動的な要素にもイベント発生時の処理を設定できます

調査範囲について

onメソッドの構文では、要素を第2引数の「セレクタ」で設定します。そして最初のjQueryオブジェクトには調査範囲を指定します。動的な要素にイベント発生時の処理を設定できるのは非常に便利ですが、これを実現するためにはイベントが発生するたびにDOMの状態を確認しなければならず、そのため負荷が高いのです。

そこで負荷を減らすためにDOM全体を調べるのではなく「調査範囲を設定して」その範囲でしかイベントの発生を確認しないことで負荷を下げているのです

サンプル(on/04.html)を開いてbody内にboxのclass属性が設定されたdiv要素が2つあることを確認してください。これらのdiv要素は、それぞれmainとsubの異なるid属性が設定されたdiv要素内にあります。

<div id="main">
	<div class="box"></div>
</div>
<div id="sub">
	<div class="box"></div>
</div>

jQueryは以下の様に記述され、onメソッドの引数にはイベント名の「click」、セレクタのboxのclass属性(のdiv要素)、そしてfunctionの「clickFunc」が設定されています。調査範囲にはmainのid属性が設定されており、これでmainのid属性の要素に含まれる要素しかイベントの発生を調べなくなります。その分、高速に処理できるというわけです

$("#main").on("click", ".box", function (eo){
	alert("click");
});

結果として、上のdiv要素をクリックするとアラートで「click」と表示されます。下のdiv要素は調査範囲のmainのid属性の要素に含まれないためイベントの取得はされずクリックしても反応しません

複数のイベントに共通のfunctionを設定

onメソッドのイベント名は半角スペースを挟むことで、複数のイベントに共通のfunctionを設定できます。
サンプル(on/05.html)を開いてbody内の構成はon/04.htmlと同じ事を確認してください。jQueryもほとんどon/04.htmlと同じで、異なるのは以下の様にイベント名に半角スペースを挟んで「mouseenter」が追加されていることです。

$("#main").on("click mouseenter", ".box", function (eo){
	alert("click");
});

結果として、上のdiv要素にマウスカーソルが入った時(mouseenter)もアラートで「click」と表示されます。この構文では各イベントとも共通のfunctionしか設定できません。複数のイベントに異なるfunctionを設定したい場合は4項先の「まとめて複数のイベントを設定する」の構文を利用します。

objectオブジェクトをfunctionに渡す

functionにデータ(object)を渡す
調査範囲.on( イベント名, セレクタ, object, function)ver1.7〜

セレクタとfunctionの間(つまり第3引数)にobjectオブジェクトを設定することで、functionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。
サンプル(on/06.html)を開いてbody内の構成はon/04.htmlと同じ事を確認してください。

jQueryもon/04.htmlとほとんど同じで、異なるのは以下の様に、第3引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されている点です。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。このサンプルでは、この値をアラートで表示します。

$("#main").on("click", ".box", {test:10}, function (eo){
	alert(eo.data.test);
});

結果として、上のdiv要素をクリックすると第3引数で渡されたtestプロパティの値「10」がアラートで表示されます。

objectデータの有効活用

前項のfunctionにデータを渡す仕組みは、大きな可能性をもっています。具体的には共通のfunctionに個別の機能を持たせることができます

サンプル(on/06b.html)を開いてbody内の構成はon/06.htmlと同じ事を確認してください。jQueryは以下の部分を最初に確認してください。onメソッドによって2つのdiv要素とも共通のfunction「clickFunc」を設定しています。そしてポイントなのはobjectデータで、プロパティのmyNameに異なる値(John, Bob)を渡している点です。

$("#main").on("click", ".box", {myName:"John"}, clickFunc);
$("#sub").on("click", ".box", {myName:"Bob"}, clickFunc);

functionのclickFuncでは以下の様に、受け取ったobjectオブジェクトのmyNameプロパティの値をアラートで表示しているだけです。

function clickFunc(eo){
	alert("my name is " + eo.data.myName)
}

結果として、上のdiv要素をクリックすると「my name is John」と表示され、下のdiv要素をクリックすると「my name is Bob」と表示されます。利用したfunctionは共通ですが、上と下のdiv要素で異なる動作をさせることができました。

falseを返すfunctionの利用

functionを設定する部分にfalseを設定すると、イベントフローを停止しブラウザ本来の機能も停止することができます。この機能があるためfunction内で「return false」を実行すると、イベントフローを停止しブラウザ本来の機能も停止します

サンプル(on/07.html)を開いてbody内にa要素が1つあるのを確認してください。jQueryは以下の様に記述され、a要素がクリックされたらtextメソッドを利用してa要素の文字部分を「クリックされたよ」と変更します。

$("body").on("click", "a", function(){
	$(this).text("クリックされたよ");
	return false;
});

ポイントは3行目の「return false;」です。この処理があるので、a要素をクリックしてもブラウザ本来のリンク処理は実行されません。また、このサンプルでは確認できませんがイベントフローも停止します。これについては使い方を確認してください。→参考:使い方「イベントフロー(1)」

まとめて複数のイベントを設定する

複数のイベントを設定する
調査範囲.on( object, セレクタ )ver1.7〜

第1引数にobjectオブジェクトを設定することで、複数のイベントにそれぞれ個別のfunctionを設定できます
サンプル(on/08.html)を開いてbody内の構成はon/06.htmlと同じ事を確認してください。

jQueryは以下のように「eventObj」というobjectオブジェクトを作成し、そのプロパティとしてイベント名を設定します。サンプルではmouseenterとmouseleaveのイベントを設定し、実行したいfunctionを代入しています。mouseenterで背景色をオレンジに、mouseleaveで背景色を青にしています。

eventObj = new Object();
eventObj.mouseenter = function(eo){
	$(this).css("background-color","#f93");
};
eventObj.mouseleave = function(eo){
	$(this).css("background-color","#09c");
};

作成したobjectオブジェクトは以下の様にonメソッドの第1引数として設定します。結果として、上のdiv要素にマウスカーソルを重ねるとdiv要素の背景色がオレンジ色になり、マウスカーソルを外すと青に戻ります。

$(function () {
	$("#main").on(eventObj, ".box");
});

構造が分かりにくくなりますが、objectオブジェクトを直接引数に設定したサンプルも紹介しておきます。
→サンプル(on/08b.html

複数のイベントを設定するときもデータを渡せます

複数のイベントを設定する(データを渡す)
調査範囲.on( object, セレクタ, object )ver1.7〜

複数のイベントを設定する構文でデータを渡したい場合は、セレクタの後(つまり第3引数)にobjextオブジェクトを設定します。サンプル(on/09.html)を開いてbody内の構成はon/08.htmlと同じ事を確認してください。

jQueryもほとんど同じで、異なるのは複数のイベントを設定しているobjectオブジェクト「eventObj」に以下の様なクリックの設定を追加している点です。このクリックの処理でobjectデータを受け取りアラートで表示するようにします。

eventObj.click = function(eo){
	alert(eo.data.test);
};

onの部分は以下の様に、第3引数にobjectオブジェクトを設定しました。結果として、上のdiv要素をクリックすると第3引数で渡されたtestプロパティの値「10」がアラートで表示されます。

$(function () {
	$("#main").on(eventObj, ".box", {test:10});
});

この構文では複数のfunctionが設定できますが、そのfunctionに個別の値を渡したい場合のサンプルを紹介します。サンプル(on/09b.html)を開いてbody内の構成がon/09.htmlと同じ事を確認してください。

jQueryでは、まず以下の部分を確認してください。click/mouseenter/mouseleaveの処理は殆ど共通で、イベントが発生した要素のテキスト内容を変更する処理が書いてあります。ポイントは表示するテキストの内容で、dataプロパティの値がそれぞれ異なる点です。
clickイベントではcl、mouseenterイベントではme、mouseleaveイベントではmlの値を利用するようにしています。

eventObj.click = function(eo){
	$(this).text(eo.data.cl);
};		
eventObj.mouseenter = function(eo){
	$(this).text(eo.data.me);
};		
eventObj.mouseleave = function(eo){
	$(this).text(eo.data.ml);
};

続いて以下の部分を確認してください。1行目でobjectオブジェクトtestObjを作成し、上記で利用している3つのプロパティの値を設定しています。そして2行目のonメソッドの第3引数に設定しました。
testObjの内容が多いから2行に分けただけで、on/09.htmlのように直接objectオブジェクトを記述しても構いません。

var testObj = {cl:"click", me:"enter", ml:"leave"};
$("#main").on(eventObj, ".box", testObj);

結果として、上のdiv要素内にマウスカーソルが入ると「enter」と表示され、マウスカーソルがdiv要素から出ると「leave」と表示されます。このようにイベントごとに利用する値を変えることで複数のfunctionにも異なるデータを渡せるのです。

関連項目

設定したイベント発生時の処理を解除したい場合はoffメソッドを利用します。