HTMLElement: change イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

  • <input type="checkbox"> 要素が(クリックやキーボードを使用して)チェックされたり解除されたりした場合
  • <input type="radio"> 要素がチェックされた場合(ただし解除された場合は発行されない)
  • ユーザーが明示的に変更を確定したとき(たとえば、 <select> のドロップダウンの値をマウスクリックで選択した場合、 <input type="date"> の日付ピッカーで日付を選択した場合、 <input type="file"> のファイル選択ダイアログでファイルを選択した場合など)。
  • 要素の値が変更された後、その要素のフォーカスが失われたとき。ユーザーの操作が選択ではなく入力である要素、例えば <textarea><input> 要素の text, search, url, tel, email, password 型の要素で発生します。

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("change", (event) => {});

onchange = (event) => {};

イベント型

一般的な Event です。

<select> 要素

HTML

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

js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");

selectElement.addEventListener("change", (event) => {
  const result = document.querySelector(".result");
  result.textContent = `${event.target.value}が好きですね`;
});

結果

テキスト入力要素

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

HTML

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

JavaScript

js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("change", updateValue);

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

結果

仕様書

Specification
HTML
# event-change
HTML
# handler-onchange

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
change event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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