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

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

.result直前に実行したイベントハンドラが返した値の取得

構文

直前に実行したイベントハンドラが返した値の取得返値:不特定
イベントオブジェクト.resultver1.3〜

機能

イベントオブジェクトのresultプロパティを利用すると直前に実行されたイベントハンドラが返した値を取得できます。イベントハンドラ間での情報伝達に利用できそうです

上記「構文」の説明で、返値が「不特定」になっていますが、これはreturnで返された値によるためです(returnで数値が返されれば数値が得られますし、文字列が返されれば文字列が得られます)。

解説

直前に実行したイベントハンドラが返した値を取得します

サンプル(result/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryでは、まず以下の部分を確認して下さい。 clickのイベントハンドラとして「firstFunc」と「secondFunc」の2つのfunctionが設定されています。

$(function () {
	$("div").click(firstFunc);
	$("div").click(secondFunc);
});

最初に設定した「firstFunc」では、以下の様にreturnで「red」と返しているだけです。

function firstFunc(eo){
	return "red";
}

次に設定した「secondFunc」では、以下の様にresultプロパティを利用して直前に実行した「firstFunc」で返された値「red」を取得します。結果として、div要素をクリックするとアラートで「red」と表示されます。

function secondFunc(eo){
	alert(eo.result);
}

イベントハンドラの設定順に注意

イベントハンドラが実行される順番は、イベントハンドラを設定した順番と同じになります。イベントハンドラの実行順を間違えると値が取得できないので注意しましょう。

サンプル(result/02.html)を開いてbody内の構成がresult/01.htmlと同じことを確認してください。jQueryもほとんど同じで、異なるのは以下の様にイベントハンドラを設定した順番を変更しただけです(secondFuncをfirstFuncよりも先に設定しています)。

$(function () {
	$("div").click(secondFunc);
	$("div").click(firstFunc);
});

結果としてsecondFuncが先に実行され、returnが利用される前にresultプロパティで値を取得しますが、取得できずアラートには「undefined」と表示されます。

メモ

イベントオブジェクトの発行は各イベントごとです

イベントオブジェクトはイベントの発生ごとに作成され、次回に持ち越されることはありません。そのため、前回実行されたイベントハンドラで返された値は取得できません。

サンプル(result/test01.html)を開いてbody内の構成がresult/01.htmlと同じことを確認してください。jQUeryは以下の様に記述されています。

$("div").click(function(eo) {
	alert(eo.result);
	return "red";
});

1回目のクリックではreturnされていないので、1行目の「eo.result」は「undefined」となります。その後、2行目のreturnで「red」を返します。2回目のクリックでは、最初のクリックで「red」と返されているから「red」と表示されると考えてしまうかもしれませんが、結果は「undefined」です。

これはイベントオブジェクトがイベントの発生ごとに作成され、次回に持ち越されることはないためです(最初のクリックと2回目のクリックは別のイベントなのですから当然なのです)。