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() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("change", (event) => {});
onchange = (event) => {};
イベント型
一般的な Event です。
例
<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");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
const result = document.querySelector(".result");
result.textContent = `${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.target.value;
}
結果
仕様書
| Specification |
|---|
| HTML Standard # event-change |
| HTML Standard # handler-onchange |
ブラウザーの互換性
BCD tables only load in the browser
すべてのブラウザーにおいて、特定の操作で change イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では <select> 要素をキーボードで操作すると、 change イベントは Enter を押すか <select> からフォーカスが離れるまで発生しませんでした（Firefox バグ 126379 を参照）。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。