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

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

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

構文

イベント発生時に実行する処理を設定します返値:jQueryオブジェクト
jQo.live( イベント名, function)ver1.3〜1.8.2
jQo.live( イベント名, object, function)ver1.4〜1.8.2
jQo.live( object )ver1.4.3〜1.8.2
※ver1.9で廃止されました

機能

構文的にはbindメソッドと同じです。異なるのは動的な要素(プログラムで後から追加された要素)にも利用できる点です

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

ver1.4.3からはobjectオブジェクトを利用して、一度に複数のイベントを設定できます。

liveメソッドは負荷が高いためv1.9で廃止となりました。代わりにonメソッドを利用してください。

解説

イベント発生時に実行する処理を設定

サンプル(live/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、liveメソッドの引数にイベント名の「click」とfunctionの「clickFunc」が設定されています。イベント名は文字列で設定するのでクォートを忘れないでください

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

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

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

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

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

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

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

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

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

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

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

objectオブジェクトをイベントハンドラに渡す

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

jQueryは以下の様に記述され、liveメソッドの第2引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。このサンプルでは、この値をアラートで表示します。

$("div").live("click", {test:10}, function(eo){
	alert(eo.data.test);
});

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

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

liveメソッドは引数にobjectオブジェクトを設定することで、複数のイベントにそれぞれ個別のfunctionを設定できます。サンプル(live/04.html)を開いてbody内の構成はlive/01.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オブジェクトは以下の様にliveメソッドの引数として設定します。結果として、div要素にマウスカーソルを重ねるとdiv要素の背景色がオレンジ色になり、マウスカーソルを外すと青に戻ります。

$(function () {
	$("div").live(eventObj);
});

構造が分かりにくくなりますが、objectオブジェクトをliveメソッドの引数に直接設定することも可能です。
→サンプル(live/04b.html

falseを返すイベントハンドラの利用

liveメソッドの引数でfunctionを設定する部分にfalseを設定すると、イベントフローを停止しブラウザ本来の機能も停止することができます。この機能があるためイベント発生時の処理(function)内で「return false」を実行すると、イベントフローを停止しブラウザ本来の機能も停止するのです

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

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

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

関連項目

設定したイベントハンドラを解除したい場合はdieメソッドを利用します。