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 2015年7月.
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 # event-change |
| HTML # handler-onchange |
ブラウザーの互換性
すべてのブラウザーにおいて、特定の操作で change イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では <select> 要素をキーボードで操作すると、 change イベントは Enter を押すか <select> からフォーカスが離れるまで発生しませんでした（Firefox バグ 126379 を参照）。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。