javascripのinputイベントについて

日常の開発で、<input　type="text">DOMのテキスト変更があった場合、よく

changeベントを使っていた。ある開発のきっかけで、inputイベントを知った。

changeベントと比べると、inputイベントのほうがリアルタイム的にイベントが

発生するため、使いやすい。

詳細をみてみよう。

change イベントは”要素の変更が終わったときにトリガされます。”と定義されているが、

わかりにくい。例えば、<input　type="text">の要素があるとして、この要素に「12345」の

文字を入力しようとする、①１を入力し終わったときに、イベントがくるのか、それとも②12345を

入力し終わったときなのか？正直よくわからないが、②という人がいるでしょう！どっちも違う。

正しいのが、要素に変更を加え、その要素からカーソルが外れた場合に、トリガーされる。

では、inputイベントについてみてみよ。

inputイベントは”要素の値が変更されるたびにトリガされます。”と定義されている。

これがわかりやすい。つまり、要素の値を変更した場合、即時にイベントが来る。

change イベントとinputイベントを使い分けて、

リアルタイム性を求めない場合、change イベントを使う。

テキストを変更して、そのテキストをプレビューしたいといったリアルタイム性を求める機能なら、

inputイベントを使ったほうがいいでしょう。