Change event
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> 型の一覧があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
基本構文
<select onchange="console.log(this.value)">
<option value="a">A</option>
<option value="b">B</option>
</select>
<script>
document.querySelector('select').addEventListener('change', e => {
console.log('変更:', e.target.value);
});
</script>ライブデモ
Change and input. Difference
Change is value. certain time, input is ki-input. to emitdifference.
実務での使いどころ
-
Change event の活用
change イベントは <input>, <select>, <textarea> 要素において、ユーザーが要素の値を変更したときに発行されます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。