HTMLElement: change イベント

change イベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。

バブリング あり
キャンセル 不可
インターフェイス Event
イベントハンドラープロパティ onchange

変更される要素の種類やユーザーが要素を操作する方法によって、 change イベントは異なる時点で発生します。

  • <input type="radio"> および <input type="checkbox"> の場合は、 (クリックまたはキーボードを使用して) 要素が :checked になったとき。
  • ユーザが明示的に変更を確定したとき (たとえば、 <select> のドロップダウンの値をマウスクリックで選択した場合、 <input type="date"> の日付ピッカーで日付を選択した場合、 <input type="file"> のファイル選択ダイアログでファイルを選択した場合など)。
  • 要素の値が変更されたが、確定しないうちに要素がフォーカスを失ったとき (たとえば、 <textarea> または <input type="text"> の値を編集した後に、要素がフォーカスを失った場合)。

HTML 仕様書には、 change イベントを発生させる <input>の一覧があります。

<select> 要素

HTML

<label>アイスクリームの味:
  <select class="ice-cream" name="ice-cream">
    <option value="">1つ選択してください …</option>
    <option value="chocolate">チョコレート</option>
    <option value="sardine">イワシ</option>
    <option value="vanilla">バニラ</option>
  </select>
</label>

<div class="result"></div>

JavaScript

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});

結果

テキスト入力要素

<input type="text"> など一部の要素では、コントロールがフォーカスを失うまで change イベントが発生しません。以下のフィールドに何かを入力してから、他の部分をクリックするとイベントが発生します。

HTML

<input placeholder="何かテキストを入力" name="name"/>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}

結果

仕様書

仕様書 状態
HTML Living Standard
change の定義
現行の標準

ブラウザーの互換性

No compatibility data found. Please contribute data for "api.HTMLElement.change_event" (depth: 1) to the MDN compatibility data repository.

すべてのブラウザーにおいて、特定の操作で change イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では <select> 要素をキーボードで操作すると、 change イベントは Enter を押すか <select> からフォーカスが離れるまで発生しませんでした (バグ 126379 を参照)。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。

関連情報