内容が変更されたら引数の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」が設定されています。{$("select").change(changeFunc);});changeメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。内容が変更されたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。appendメソッドを利用してp要素に追加します。このサンプルでは引数(イベントオブジェクト)は利用していません。");};結果として、select要素を変更(別の選択肢を選択)すると、選択したテキストがp要素に追加されていきます。ポイントなのは以前と同じ選択肢を選択した場合(つまり結局変更しなかった場合)はfunctionが実行されません。p要素に追加されていくテキストは絶対に同じ文字が2連続にはなりません。変更されたときのみイベントが発生するのです。イベントのfunction設定は、無名関数を利用することが多いです。");});他の要素に設定された変更時の処理を実行する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要素を変更するとp要素に第1引数で渡されたtestプロパティの値「10」が追加されます。textタイプのinput要素でchangeメソッドを利用する際の注意textタイプのinput要素でchangeメソッドを利用する時は、イベントが発生するタイミングに気を付けてください。input要素では「内容が変更されてフォーカスが外れた時」にイベントが発生します。input要素からフォーカスが外れるまでfunctionは実行されません。サンプル(change/04.html)を開いてbody内にinput要素とp要素があることを確認してください。appendメソッドを利用してp要素に追加します。");});実際にinput要素に文字を入力してもfunctionが実行されないため、p要素に文字が表示されません。input以外の場所をクリックしてフォーカスをinput要素から外すと、p要素に文字が表示されます。このようにinput要素に利用する場合は、フォーカスが外れてからfunctionが実行されることに注意してください。子孫要素の変更に対応していますchangeイベントはバブリングする(イベントが親要素へ伝わる)ため子孫要素の変更にも対応しています。サンプル(change/05.html)を開いてbody内に以下の様に記述されているのを確認してください。ポイントはform要素内にラジオボタンのセットがあることです。C</label></form><p></p>jQueryは以下の様に記述され、セレクタにinput要素ではなくform要素を指定しています。そのためform要素(子要素であるラジオボタンを含む)に変更があればchangeメソッドで設定したfunctionが実行されます。parentメソッドによって、その親要素(label要素)のテキスト情報を取得します。textメソッドによってp要素に表示します。結果としてラジオボタンを選択すると、そのlabel要素のテキストがp要素に表示されます。ここでポイントなのは、変更されるのはinput要素なのにセレクタにはform要素を指定しても機能している点です。これはイベントフローによる仕組み(バブリング)で、input要素で発生したイベントがform要素に伝わためです。