JavaScript - changeイベントの発生タイミング

クライアントサイドJavaScriptで利用できるイベントの１つに change イベントがあります。

change イベントは、input要素、select要素、textarea要素の値の変更が確定した時に発生します。

注意点として、テキストエリアにキーボードで文字を入力している最中は、 changeイベントは発生しません。

入力内容が確定し、テキストエリアからフォーカスが外れた時点で発生します。

文字を入力最中もchangeイベントが発生すると勘違いしないように注意してください。

1行のテキスト入力ボックスでも同じです。

テキスト以外のフォーム部品でのchangeイベント発生タイミングの一例です。

・セレクトボックスは選択内容が変更された時。

・チェックボックスは選択・非選択が変更された時。

・ラジオボタンは選択・非選択が変更された時。

・ファイル選択ダイアログは、ファイルが選択された時や、選択ファイルが変更された時

changeイベントハンドラのサンプルコード

addEventListener()を使って、changeイベントハンドラを設定する場合は、次のようなコードとなります。

HTML


<p><textarea id="out"></textarea></p>

JavaScript


var elem = document.getElementById('out');

out.addEventListener('change', function(){
	console.log('changed');
}, false);