.change()

Categories: Events > Form Events | Forms

.change( handler(eventObject) ) Returns: jQuery

説明: "change" JavaScript イベントに、イベント・ハンドラをバインドするか、または要素でそのイベントをトリガします。

  • version added: 1.0 .change( handler(eventObject) )

    handler(eventObject)イベントがトリガされるたびに実行する関数。

  • version added: 1.4.3 .change( [eventData], handler(eventObject) )

    eventDataイベントハンドラに渡すデータのマップ。

    handler(eventObject)イベントがトリガされるたびに実行する関数。

  • version added: 1.0 .change()

このメソッドは、最初から2つの変数で .bind('change', handler) の、3番目の変数で .trigger('click') を表すショートカットです。

change イベントは、値が変化すると要素に送られます。このイベントは、<input> 要素、<textarea> ボックス、および <select> 要素だけに使用できます。 セレクトボックス、チェックボックス、ラジオボタンは、ユーザがマウスで選択したときにイベントはすぐに始動しますが、他の要素タイプのイベントは、要素がフォーカスを失うまで延期されます。

例として、次のHTMLを考えます:

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

イベントハンドラは、テキスト入力とセレクトボックスにバインドすることができます:

$('.target').change(function() {
  alert('.change() に対するハンドラが呼び出されます。');
});

今、ドロップダウンリストから2番目の選択肢を選択した場合、警戒が表示されます。 フィールド内のテキストを変更して、離れた場所をクリックした場合にも表示されます。しかし、内容を変更せずにフィールドのフォーカスを失った場合は、イベントがトリガされません。手動でイベントをトリガするために、.change() を引数なしで適用します:

$('#other').click(function() {
  $('.target').change();
});

また、このコードを実行後は、Trigger the handler をクリックするとメッセージを通知するようになります。 ハンドラは、フォーム要素の両方の change イベントにバインドされているため、メッセージは2回表示されます。

jQueryの1.4では、Internet Explorerのchange イベントはバブルし、他のブラウザのイベントと共に一貫して動作します。

例:

例:select へ change イベントをアタッチし、選択した各選択肢のテキストを取得して、divにそれを書き込みます。その後、最初のテキストの描画のためのイベントをトリガします。 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="/files/jquery.js"></script>
</head>
<body>
  <select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>
<script>
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>
</body>
</html>

デモ:

例:全てのテキスト入力要素に妥当性テストを追加するには、次のようにします: 

$("input[type='text']").change( function() {
  // check input ($(this).val()) for validity here
});