Change event
change イベントは <input>、<select>、<textarea> の値が変更され確定した時点で発火します。input イベントと異なり、変更確定時のみ発火します。
概要
change イベントは <input>、<select>、<textarea> の値が変更され確定した時点で発火します。input イベントと異なり、変更確定時のみ発火します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 3+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 2+
Firefox Android 4+
基本構文
JAVASCRIPT
<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 event の活用
changeイベント。フォーム要素の値が確定した際に発火するイベント。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。