--- title: 'HTMLElement: change イベント' slug: Web/API/HTMLElement/change_event tags: - Change - Event - HTML - HTML DOM - HTMLElement - Reference - Web translation_of: Web/API/HTMLElement/change_event ---

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

バブリング	あり
キャンセル	不可
インターフェイス	{{domxref("Event")}}
イベントハンドラープロパティ	{{domxref("GlobalEventHandlers/onchange", "onchange")}}

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

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

body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}

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;
}

結果

仕様書

仕様書	状態
{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}	{{Spec2('HTML WHATWG')}}

ブラウザーの互換性

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

例

<select> 要素

HTML

JavaScript

結果

テキスト入力要素

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報