change ( onchange )イベント
change ( onchange )イベントは、<input> エレメントなどの入力値が変化したら発生するイベントです。
document.getElementsByTagName('form')[0].addEventListener("change", (event)=>{
console.log( 'event type : ' + event.type );
});
似たイベントにoninput イベントがあります。違いは、oninput イベントは値が変化する度に設定されたコールバック関数を実行します。
onchange イベントは入力値が変化しフォーカスを失ったらコールバック関数を実行します。値が変わらずにフォーカスのみの移動は onchange イベントは起きません。
onchange イベントは <select> にも対応しています。ラジオボタンやcheckboxタイプにおいても選択肢が変化したらコールバック関数を実行します。
ページ内 Index
構文（Syntax）
in HTML
<tagelement onchange="function( )">
in JavaScript
object.onchange = function(){... };
object.addEventListener("change", function( event ){... });
備考（Remarks）
| Bubbles | Yes |
| Cancelable | No |
| Interface | Event |
| 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 イベントハンドラーを設定していません。イベントハンドラーの設定の有無の違いを確かめるためです。