日常の開発で、<input type="text">DOMのテキスト変更があった場合、よく changeベントを使っていた。ある開発のきっかけで、inputイベントを知った。 changeベントと比べると、inputイベントのほうがリアルタイム的にイベントが 発生するため、使いやすい。 詳細をみてみよう。 change イベントは”要素の変更が終わったときにトリガされます。”と定義されているが、 わかりにくい。例えば、<input type="text">の要素があるとして、この要素に「12345」の 文字を入力しようとする、①1を入力し終わったときに、イベントがくるのか、それとも②12345を 入力し終わったときなのか?正直よくわからないが、②という人がいるでしょう!どっちも違う。 正しいのが、要素に変更を加え、その要素からカーソルが外れた場合に、トリガーされる。 では、inputイベントについてみてみよ。 inputイベントは”要素の値が変更されるたびにトリガされます。”と定義されている。 これがわかりやすい。つまり、要素の値を変更した場合、即時にイベントが来る。 change イベントとinputイベントを使い分けて、 リアルタイム性を求めない場合、change イベントを使う。 テキストを変更して、そのテキストをプレビューしたいといったリアルタイム性を求める機能なら、 inputイベントを使ったほうがいいでしょう。
ゼロベースからのプログラム技術をはじめ、アプリの開発、システムの構築までの幅広い情報を発信していきます。