changeイベント
changeイベントとは、ユーザーが要素の値を変更したときに発生するイベントです。
主にセレクトボックス、チェックボックス、ラジオボタンなどのインタラクティブな要素が対象になります。変更される要素の種類やユーザーが要素を操作する方法によって、changeイベントは異なる時点で発火します。
inputイベントとは異なります。
changeイベントのプロパティを解説
changeイベントに渡される第一引数(eventオブジェクト)では、様々なプロパティを利用できます。このeventオブジェクトに含まれる主なプロパティを一覧にして説明します。
JavaScriptでchageイベントを記述する
const element = document.getElementById('sample_element'); // アロー関数 element.addEventListener('change',event => { }); // 通常の関数 element.addEventListener('change', function(event) { });
主なプロパティ・メソッド一覧
セレクトボックス、チェックボックス、ラジオボタンに共通するプロパティおよび固有のプロパティ・メソッドのがあります。
★がついているプロパティ・メソッドはWeb制作現場でよく使用します。
共通のプロパティ(セレクトボックス、チェックボックス、ラジオボタン)
- event.target ★
- イベントが発生した要素自体を指します。
- event.currentTarget ★
- 現在のイベントハンドラーが登録されている要素を指します。
event.targetは実際にクリックされた要素ですが、event.currentTargetはイベントリスナーがバインドされた要素です。 - event.target.value ★
- イベントが発生した要素の値を取得します。
- event.type
- 発生したイベントの種類を表します。今回の場合は“change”が取得されます。
- event.bubbles
- イベントがバブリング(親要素に伝播するかどうか)するかを示します。trueの場合、イベントが伝播します。
- event.cancelable
- イベントがキャンセル可能かどうかを示します。trueであれば、event.preventDefault()でそのデフォルトの動作をキャンセルできます。
- event.defaultPrevented
- イベントのデフォルト動作がキャンセルされたかを示します。trueの場合、event.preventDefault()が呼び出されたことを意味します。
- event.composed
- イベントがシャドウDOMを超えて伝播するかどうかを示します。trueであれば、イベントがシャドウツリー外のDOMに伝播します。
- event.eventPhase
- イベントがどの段階にあるかを示します(イベントが伝播している段階を確認する際に使用します)。
0: 無効、1: キャプチャフェーズ、2: ターゲットフェーズ、3: バブリングフェーズ。 - event.isTrusted
- イベントがユーザーによって発生したものか(true)、スクリプトによって発生したものか(false)を示します。ユーザーが操作したイベントはtrueです。
- event.timeStamp
- イベントが発生した時間をミリ秒で表します。ページが読み込まれてからの時間で表されます。
セレクトボックスの固有のプロパティ・メソッド
select要素やそのオプションに関連するプロパティやメソッドで、セレクトボックスの操作に役立つものです。
それぞれのプロパティやメソッドについて説明します。
- event.target.selectedIndex ★
- select要素で現在選択されているオプションのインデックス(0から始まる)を取得します。選択されていない場合は-1を返します。
- event.target.options
- select要素のすべてのoption要素のリスト(配列のようなオブジェクト)を取得します。このリストから各オプションにアクセスできます。
オプション全体を操作したり、特定のオプションを選択する際に使います。 - event.target.multiple
- select要素が複数選択可能かどうかを示します。trueであれば、ユーザーは複数のオプションを選択できます。
- event.target.length
- select要素に含まれるoption要素の数を返します。セレクトボックスの選択肢の数を知りたいときに使います。
- event.target.add(option, index)
- select要素に新しいoptionを追加します。optionは追加するoption要素、indexは追加する位置を指定します。indexが指定されない場合、末尾に追加されます。
- event.target.remove(index)
- select要素から特定のoptionを削除します。削除したいオプションのインデックスをindexで指定します。
チェックボックス、ラジオボタン共通のプロパティ
- event.target.checked ★
- チェックボックスやラジオボタンが選択されているかどうかを返します。チェックボックスが選択されている場合はtrue、選択されていない場合はfalseが返されます。
- event.target.name
- HTMLのname属性の値を返します。特に複数のチェックボックスやラジオボタンのグループに対して、それらが同じname属性を持つ場合、そのname属性の値を取得できます。
チェックボックス固有のプロパティ
- event.target.indeterminate
- チェックボックスが不確定な状態かどうかを示します。trueの場合、そのチェックボックスは「不確定」(チェックが完全にオンでもオフでもない状態)になります。これは、すべてのサブオプションが一部選択されている場合などに便利です。
同じカテゴリの用語 Terms in the Same Category
JavaScript
免責事項
- 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。