change イベントは、次の2つのシナリオにおいて HTML DOM API で使用されます。

  • 要素の値の変更がユーザーによってコミットされたときに、<input><select>、および <textarea> 要素で発生します。input イベントとは異なり、要素の value が変更されるたびに change イベントが発生するとは限りません。
  • 1つまたは複数のオブジェクトのトラックが有効または無効になっているとき、AudioTrackListVideoTrackList、および TextTrackList オブジェクトで発生します。

一般情報

仕様
HTML Living Standard
change (for form controls) の定義

HTML Living Standard
change (for track lists) の定義
インターフェイス
Event
Bubbles
はい, (少なくともフォームコントロールで発生したイベント)
キャンセル可能
いいえ
対象
Element, HTMLElement, HTMLSelectElement, HTMLTextareaElement
AudioTrackList, VideoTrackList, TextTrackList
既定のアクション
なし

プロパティ

親の Event インターフェイスからプロパティを継承します。

説明

変更されるフォーム要素の種類や、ユーザーが要素とやりとりする方法によっては、change イベントが別の瞬間に発生します。

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

特定のタイプのインタラクションで change イベントを発生させる必要があるかどうかは、ブラウザによって異なります。例えば、<select> 要素のキーボードナビゲーションは、ユーザーが Enter キーを押すか、<select> からフォーカスを離すまで、Gecko の change イベントを起動しません (バグ 126379 を参照)。

HTML 仕様には、change イベントを発生させる <input> タイプがリストされています。

ユーザー入力の例

例: select の変更イベント

次のコードは onchange 属性で changeEventHandler() 関数を呼び出すことによって <select>change イベントを処理します。イベントターゲットの値を読み取り、アラートに表示します。

<label>Choose an ice cream flavor:
    <select id="ice-cream" name="ice-cream">
        <option value="">Select One …</option>
        <option value="chocolate">Chocolate</option>
        <option value="strawberry">Strawberry</option>
        <option value="vanilla">Vanilla</option>
    </select>
</label>

JavaScript コードはシンプルです。

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="ice-cream"]').onchange=changeEventHandler;
},false);

function changeEventHandler(event) {
    // You can use “this” to refer to the selected element.
    if(!event.target.value) alert('Please Select One');
    else alert('You like ' + event.target.value + ' ice cream.'); 
}

結果はこのようになります。

仕様

仕様書 ステータス コメント
HTML Living Standard
change (for form controls) の定義
現行の標準  
HTML Living Standard
change (for track lists) の定義
現行の標準  
HTML5
change の定義
勧告  
Document Object Model (DOM) Level 2 Events Specification
change の定義
廃止された 初回定義

ブラウザの互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有) (有)
  
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有) (有)

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,