備忘録的プログラミングリファレンス

change ( onchange )イベント

 change ( onchange )イベントは、<input> エレメントなどの入力値が変化したら発生するイベントです。

change イベントを追加( onchange イベントハンドラーとして追加)
document.getElementsByTagName('form')[0].addEventListener("change", (event)=>{
console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

 似たイベントにoninput イベントがあります。違いは、oninput イベントは値が変化する度に設定されたコールバック関数を実行します。 onchange イベントは入力値が変化しフォーカスを失ったらコールバック関数を実行します。値が変わらずにフォーカスのみの移動は onchange イベントは起きません。
 onchange イベントは <select> にも対応しています。ラジオボタンやcheckboxタイプにおいても選択肢が変化したらコールバック関数を実行します。

構文(Syntax)

in HTML

<tagelement onchange="function( )">

in JavaScript

object.onchange = function(){... };

object.addEventListener("change", function( event ){... });

備考(Remarks)

BubblesYes
CancelableNo
InterfaceEvent
Supported HTML Elements<input type="checkbox">,<input type="color">,<input type="date">,<input type="datetime">,<input type="email">,<input type="file">,<input type="month">,<input type="number">,<input type="password">,<input type="radio">,<input type="range">,<input type="search">,<input type="tel">,<input type="text">,<input type="time">,<input type="url">,<input type="week">,<select>,<textarea>

Example

 change ( onchange )イベントの例です。確認ボタンをクリックして実行してください。
 例として、以下に <select><input> を上げました。
 <select> は値を変える度に change イベントが発生します。
 <input>Name : は値を変えてフォーカスを失ったときにイベントが発生します。
 Age : には onchange イベントハンドラーを設定していません。イベントハンドラーの設定の有無の違いを確かめるためです。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。