changeイベント・inputイベント

・change イベント

フォーム( input 要素)や選択メニュー( select 要素 )、テキストエリア( textarea 要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。 

addEventListener メソッドを使用する場合はこのように記述します。

const input = document.querySelector('input');

input.addEventListener('change', function (e) {

console.log('change');

})

テキストのinputの場合は、フォーカスがなくなった時にchangeイベントが発火します。

サンプルで確認しましょう。

このようにinput 要素に記述しても何も起きません。しかしフォーカスを外すと、

changeイベントが発火しているのがわかると思います。

change イベントは名前の通り、入力するたびに変わるという訳ではありません。

そのようにしたい場合はinputイベントを用います。

・inputイベント

input イベントはフォーム( input 要素)や選択メニュー( select 要素 )にてユーザーの操作によって値が変更されたときに発生するイベントです。 change イベントと似ていますが、 input メソッドでは文字が入力されるたびにイベントが発生します。

addEventListener メソッドを使用する場合はこのように記述します。

 

const input = document.querySelector('input');

input.addEventListener('input', function (e) {

console.log('input');

})

上記のように文字が入力されるたびにinputイベントが発火しているのがわかります。

そしてテキストボックスでは文字を削除した場合でも input イベントが発生します。

似ているイベントなので違いをまとめてみました。