changeイベントについて解説！【JavaScript】

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の場合、そのチェックボックスは「不確定」（チェックが完全にオンでもオフでもない状態）になります。これは、すべてのサブオプションが一部選択されている場合などに便利です。

まとめ

いかでしたでしょうか？
今回の記事では、JavaScriptの「change」イベントについて解説をしてきました。

今回のポイントをまとめますと、次のとおりです。

最後までお読みいただきありがとうございました！