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

.change( )内容が変更された時の処理を設定

構文

内容が変更された時の処理を設定返値：jQueryオブジェクト
jQo.change( function )ver1.0〜
jQo.change( )ver1.0〜
jQo.change( object, function )ver1.4.3〜

機能

内容が変更されたら引数のfunctionを実行します。このイベントはselect要素、input要素、textarea要素が変更されたときに発生しますが、子孫要素からバブリングしてきたイベントを受け取るのでセレクタがこれらの要素である必要はありません。

引数にfunctionを設定しない場合は、要素に設定（バインド）されたfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます（データはイベントオブジェクトのdataプロパティ経由で渡されます）。

解説

内容が変更された時に実行する処理を設定

サンプル（change/01.html）を開いてbody内に5つの選択肢（option要素）を持つselect要素とp要素があることを確認してください。 

<select>
	<option>チョコ</option>
	<option>飴</option>
	<option>煎餅</option>
	<option>キャラメル</option>
	<option>クッキー</option>
</select>
<p></p>

jQueryは以下の様に記述され、changeメソッドの引数にfunctionの「changeFunc」が設定されています。 

$(function () {
	$("select").change(changeFunc);
});

changeメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数（イベントオブジェクト）を受け取ります。そして内容が変更されたら実行したい処理を｛｝の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

changeに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
　内容を変更したら実行したい処理
}

サンプルchange/01.htmlで利用したchangeFuncは以下の様になっており、textメソッドを利用して選択されたoption要素のテキスト内容を取得し、appendメソッドを利用してp要素に追加します。このサンプルでは引数（イベントオブジェクト）は利用していません。 

function changeFunc(eo) {
	var mySelect = $("option:selected").text();
	$("p").append(mySelect+" ");
};

結果として、select要素を変更（別の選択肢を選択）すると、選択したテキストがp要素に追加されていきます。ポイントなのは以前と同じ選択肢を選択した場合（つまり結局変更しなかった場合）はfunctionが実行されません。つまりp要素に追加されていくテキストは絶対に同じ文字が2連続にはなりません。あくまでも変更されたときのみイベントが発生するのです。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル（change/01b.html） 

$("select").change(function (eo) {
	var mySelect = $("option:selected").text();
	$("p").append(mySelect+" ");
});

他の要素に設定された変更時の処理を実行する

changeメソッドは引数を設定しないと、要素に設定された変更時の処理を実行します。
サンプル（change/02.html）を開いてbody内にbutton要素が追加されたことを確認してください。

続いてjQueryを確認してください。select要素を変更した時の処理はchange/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとselect要素に設定された変更時の処理が実行されます。 

$("button").click(function(){
	$("select").change();
});

結果として、buttonを「クリック」するとselect要素を「変更した」のと同じようにp要素に文字が追加されます。buttonをクリックすると無条件にfunctionを実行するので、選択肢が同じままでもp要素に文字が追加されていきます。

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

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

jQueryは以下の様に記述され、changeメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト（eo）を通してfunctionに渡され、dataプロパティの値として取得できます。この値をappendメソッドを利用してp要素に追加します。 

$("select").change({test:10}, function (eo) {
	var mySelect = eo.data.test;
	$("p").append(mySelect+" ");
});

結果として、select要素を変更するとp要素に第1引数で渡されたtestプロパティの値「10」が追加されます。

textタイプのinput要素でchangeメソッドを利用する際の注意

textタイプのinput要素でchangeメソッドを利用する時は、イベントが発生するタイミングに気を付けてください。input要素では「内容が変更されてフォーカスが外れた時」にイベントが発生します。つまりinput要素からフォーカスが外れるまでfunctionは実行されません。

サンプル（change/04.html）を開いてbody内にinput要素とp要素があることを確認してください。 

<input type="text" />
<p></p>

jQueryは以下の様に記述され、input要素が変更されると、valメソッドを利用してinput要素のテキスト内容を取得し、それをappendメソッドを利用してp要素に追加します。 

$("input").change(function (eo) {
	var myVal = $("input").val();
	$("p").append(myVal+" ");
});

実際にinput要素に文字を入力してもfunctionが実行されないため、p要素に文字が表示されません。しかしinput以外の場所をクリックしてフォーカスをinput要素から外すと、p要素に文字が表示されます。このようにinput要素に利用する場合は、フォーカスが外れてからfunctionが実行されることに注意してください。

子孫要素の変更に対応しています

changeイベントはバブリングする（イベントが親要素へ伝わる）ため子孫要素の変更にも対応しています。
サンプル（change/05.html）を開いてbody内に以下の様に記述されているのを確認してください。ポイントはform要素内にラジオボタンのセットがあることです。 

<form>
	<label><input name="radioButton" type="radio" />radio button A</label>
	<label><input name="radioButton" type="radio" />radio button B</label>
	<label><input name="radioButton" type="radio" />radio button C</label>
</form>
<p></p>

jQueryは以下の様に記述され、セレクタにinput要素ではなくform要素を指定しています。そのためform要素（子要素であるラジオボタンを含む）に変更があればchangeメソッドで設定したfunctionが実行されます。 

$("form").change(function (eo) {
	var myText = $("input:checked").parent().text();
	$("p").text(myText);
});

このサンプルでのイベントの処理は、選択されたラジオボタン（checkedのinput要素）を選択しparentメソッドによって、その親要素（label要素）のテキスト情報を取得します。取得した情報はtextメソッドによってp要素に表示します。 結果としてラジオボタンを選択すると、そのlabel要素のテキストがp要素に表示されます。

ここでポイントなのは、変更されるのはinput要素なのにセレクタにはform要素を指定しても機能している点です。これはイベントフローによる仕組み（バブリング）で、input要素で発生したイベントがform要素に伝わためです。イベントフローは使い方でも紹介しています→参考：使い方「イベントフロー（1）」〜