HTMLElement: change イベント
change イベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発行されます。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。
変更される要素の種類やユーザーが要素を操作する方法によって、 change イベントは異なる時点で発行されます。
<input type="checkbox">要素が（クリックやキーボードを使用して）チェックされたり解除されたりした場合<input type="radio">要素がチェックされた場合（ただし解除された場合は発行されない）- ユーザが明示的に変更を確定したとき（たとえば、
<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 = `${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;
}
結果
仕様書
No specification found
No specification data found for api.GlobalEventHandlers.onchange.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
ブラウザーの互換性
BCD tables only load in the browser
すべてのブラウザーにおいて、特定の操作で change イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では <select> 要素をキーボードで操作すると、 change イベントは Enter を押すか <select> からフォーカスが離れるまで発生しませんでした（Firefox バグ 126379 を参照）。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。