jQueryのchange()によるイベント処理操作まとめ!

こんにちは、ライターのマサトです!

今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習を進めていきましょう!

この記事では、

  • 「change()」とは?
  • 基本的な使い方
  • selectボックスを使う
  • radioボタンを使う
  • 複数の要素を扱う
  • という基本的な内容から、

  • changeイベントを発生させるには?
  • changeイベントが発火しない場合
  • などの応用的な使い方に関しても解説していきます。

    この記事で、「change()」をしっかり学習して自分のスキルアップを目指しましょう!

    「change()」とは?

    それでは、まず最初に「change()」についての基本的な知識から学習を始めましょう!

    「change()」は、主にinput / select / textareaなどの要素の中身が変更された際にイベント処理を実行することができます。例えば、次のサンプル例を見てください!

    この例では、単純なラジオボタンが3つ配置されています。

    change()を使うと、いずれかのラジオボタンがクリックされた瞬間に何らかのイベント処理を自動的に実行することが出来るわけです。

    他にも、セレクトボックスから任意の項目を選択した時や、入力ボックスに文字が入力されてフォーカスが外れた瞬間に実行することも可能です。

    本記事では、このchange()について基本から応用技まで詳しく解説していきますのでぜひ参考にしてみてください!

    基本的な使い方

    ここからは、change()を使って実際にプログラミングするための手法について見ていきましょう!

    一般的な記述としては、【 対象要素.change( イベント処理関数 ) 】のように引数へイベント実行用の関数を指定すればOKです。次のサンプル例を見てください!

    この例では、テキストボックスが1つ配置されています。

    そこで、何か文字を入力したあとに「エンターキー」を押すか、画面をクリックしてフォーカスを外してみましょう。コンソールログに入力した文字列が出力されるはずです。

    つまり、テキストボックス内に何らかの文字列が入力されることで、要素の変化を検知してイベントを自動的に実行してくれるわけです。

    selectボックスを使う

    次に、「selectボックス」を使った事例を見てみましょう!selectボックスは、複数の選択肢の中からユーザーが1つ選ぶことができるフォーム部品です。

    そこで、選んだ項目をchange()を使ってコンソールログに出力してみましょう!次のサンプル例を見てください。

    この例では、3つの選択肢を用意したselectボックスを配置しています。

    そこで、change()を使い「$(‘option:selected’).text()」と記述することで選んだ項目のテキストを抽出しています。

    このように記述すれば、ユーザーが1つ選ぶたびにコンソールログに文字列が出力されるようになるというわけです。

    radioボタンを使う

    今度は、「radioボタン」を使ってみましょう!いずれかのradioボタンを選んだ際に、value属性値をコンソールログに出力してみます。

    次のサンプル例を見てください!

    この例では、3つのradioボタンを配置しておりそれぞれにvalue属性値を設定しています。change()を使って、「$(this).val()」と記述することにより選択したradioボタンのvalue属性値を検出しているのが分かりますね。

    これにより、radioボタンを選択するたびにコンソールログへvalueの値が出力されるというわけです。

    複数の要素を扱う

    これまで、1つの要素に対してchange()を使ってきましたが、複数の要素に対して利用することも可能なのでご紹介しておきます。

    この複数の要素というのは、例えば「input要素」「select要素」で同じchange()を使ったイベント処理を実行したいようなケースで有効です。

    次のサンプル例を見てください!

    この例では、単純なinput要素とselect要素が配置されています。

    注目すべきはchange()を使う際のセレクタ指定になります!

    「$(‘input, select’)」と記述することで、input要素とselect要素の両方に対応したchange()のイベント処理を実現しているわけです。

    実行内容が同じであれば、個別にchange()を記述するよりも効率が良いので覚えておくようにしましょう!

    changeイベントを発生させるには?

    change()は引数を無しにすると、changeイベントを意図的に発生させることができます。例えば、ボタンをクリックしたらinput要素のchange()イベントを実行する…というようなことも実現できるのです。

    次のサンプル例を見てください!

    この例では、input要素とボタンが配置されています。input要素にはchange()を使ったイベント処理が実装されていますよね?

    そして、ボタン要素にはクリックイベント処理が実装されています。テキストボックスに何か入力したあとにフォーカスを外すと、コンソールログに文字列が出力されるのはこれまで通りです。

    ところが、ボタンをクリックしても同じようにchange()イベントが実行されて文字列が出力されるのです!これはつまり、ボタンのクリックイベント内で「change()」を実行しているからなのです。

    このように引数なしのchange()を記述すれば、任意のタイミングでchangeイベントが実行できるので忘れないようにしましょう!

    changeイベントが発火しない場合

    change()イベントは使い方によっては正常に動作せず、意図したとおりにならないケースもあります。

    例えば、テキストボックスに「val()」を使ってあとから文字列を入力する場合を見てみましょう!

    この例では、テキストボックスとボタン要素が配置されていますね。テキストボックスに文字列を入力してフォーカスを外すとコンソールログに「変更されました!」という文字列が出力されます。

    そして、ボタンをクリックするとval()を使って「こんにちは」という文字列をテキストボックスへ入力します。

    しかし、この時にフォーカスを外してもコンソールログに「変更されました!」という文字列は出力されません。つまり、change()イベントが正しく動作していないわけです。

    実は、テキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっています。そこで、このような時は前章でも説明した「引数なし」のchange()を実行すれば良いのです!

    このように、val()で文字列を代入したあとにchange()を実行すれば、意図的にchange()イベントを動作させることができるわけです。

    このようなchange()の使い方も場合によっては重要なので覚えておきましょう!

    まとめ

    今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習しました!

    最後に、もう一度ポイントをおさらいしておきましょう!

  • 主に、input / select / textareaなどの要素に変更があった時にchange()は有効活用できる
  • 「引数なし」のchange()は、意図的にchangeイベントを実行することができる
  • val()を使ってテキストボックスの文字列を変更する場合はchange()の使い方に注意する
  • 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

    LINEで送る
    Pocket

    最短でエンジニアを目指すなら侍エンジニア塾

    cta_under_bnr

    侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

    あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

    無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

    無料体験レッスンの詳細はこちら

    書いた人

    マサト

    マサト

    JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
    30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
    JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説