こんにちは、ライターのマサトです！
今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習を進めていきましょう！
この記事では、
という基本的な内容から、
などの応用的な使い方に関しても解説していきます。
この記事で、「change()」をしっかり学習して自分のスキルアップを目指しましょう！
「change()」とは？
それでは、まず最初に「change()」についての基本的な知識から学習を始めましょう！
「change()」は、主にinput / select / textareaなどの要素の中身が変更された際にイベント処理を実行することができます。例えば、次のサンプル例を見てください！
<input type="radio" name="test"> <input type="radio" name="test"> <input type="radio" name="test">
この例では、単純なラジオボタンが3つ配置されています。
change()を使うと、いずれかのラジオボタンがクリックされた瞬間に何らかのイベント処理を自動的に実行することが出来るわけです。
他にも、セレクトボックスから任意の項目を選択した時や、入力ボックスに文字が入力されてフォーカスが外れた瞬間に実行することも可能です。
本記事では、このchange()について基本から応用技まで詳しく解説していきますのでぜひ参考にしてみてください！
基本的な使い方
ここからは、change()を使って実際にプログラミングするための手法について見ていきましょう！
一般的な記述としては、【 対象要素.change( イベント処理関数 ) 】のように引数へイベント実行用の関数を指定すればOKです。次のサンプル例を見てください！
<body>
<input type="text">
<script>
$('input').change(function() {
console.log( $(this).val() );
});
</script>
</body>
この例では、テキストボックスが1つ配置されています。
そこで、何か文字を入力したあとに「エンターキー」を押すか、画面をクリックしてフォーカスを外してみましょう。コンソールログに入力した文字列が出力されるはずです。
つまり、テキストボックス内に何らかの文字列が入力されることで、要素の変化を検知してイベントを自動的に実行してくれるわけです。
selectボックスを使う
次に、「selectボックス」を使った事例を見てみましょう！selectボックスは、複数の選択肢の中からユーザーが1つ選ぶことができるフォーム部品です。
そこで、選んだ項目をchange()を使ってコンソールログに出力してみましょう！次のサンプル例を見てください。
<body>
<select>
<option>おはよう</option>
<option>こんにちは</option>
<option>こんばんは</option>
</select>
<script>
$('select').change(function() {
var text = $('option:selected').text();
console.log( text );
});
</script>
</body>
この例では、3つの選択肢を用意したselectボックスを配置しています。
そこで、change()を使い「$(‘option:selected’).text()」と記述することで選んだ項目のテキストを抽出しています。
このように記述すれば、ユーザーが1つ選ぶたびにコンソールログに文字列が出力されるようになるというわけです。
radioボタンを使う
今度は、「radioボタン」を使ってみましょう！いずれかのradioボタンを選んだ際に、value属性値をコンソールログに出力してみます。
次のサンプル例を見てください！
<body>
<input type="radio" name="sample" value="one">
<input type="radio" name="sample" value="two">
<input type="radio" name="sample" value="three">
<script>
$('input').change(function() {
var text = $(this).val();
console.log( text );
});
</script>
</body>
この例では、3つのradioボタンを配置しておりそれぞれにvalue属性値を設定しています。change()を使って、「$(this).val()」と記述することにより選択したradioボタンのvalue属性値を検出しているのが分かりますね。
これにより、radioボタンを選択するたびにコンソールログへvalueの値が出力されるというわけです。
複数の要素を扱う
これまで、1つの要素に対してchange()を使ってきましたが、複数の要素に対して利用することも可能なのでご紹介しておきます。
この複数の要素というのは、例えば「input要素」と「select要素」で同じchange()を使ったイベント処理を実行したいようなケースで有効です。
次のサンプル例を見てください！
<body>
<input type="text">
<select>
<option>サンプル１</option>
<option>サンプル２</option>
</select>
<script>
$('input, select').change(function() {
console.log('変更されました！');
});
</script>
</body>
この例では、単純なinput要素とselect要素が配置されています。
注目すべきはchange()を使う際のセレクタ指定になります！
「$(‘input, select’)」と記述することで、input要素とselect要素の両方に対応したchange()のイベント処理を実現しているわけです。
実行内容が同じであれば、個別にchange()を記述するよりも効率が良いので覚えておくようにしましょう！
changeイベントを発生させるには？
change()は引数を無しにすると、changeイベントを意図的に発生させることができます。例えば、ボタンをクリックしたらinput要素のchange()イベントを実行する…というようなことも実現できるのです。
次のサンプル例を見てください！
<body>
<input type="text">
<button>ボタン</button>
<script>
$('input').change(function() {
console.log('変更されました！');
});
$('button').click(function() {
$('input').change();
})
</script>
</body>
この例では、input要素とボタンが配置されています。input要素にはchange()を使ったイベント処理が実装されていますよね？
そして、ボタン要素にはクリックイベント処理が実装されています。テキストボックスに何か入力したあとにフォーカスを外すと、コンソールログに文字列が出力されるのはこれまで通りです。
ところが、ボタンをクリックしても同じようにchange()イベントが実行されて文字列が出力されるのです！これはつまり、ボタンのクリックイベント内で「change()」を実行しているからなのです。
このように引数なしのchange()を記述すれば、任意のタイミングでchangeイベントが実行できるので忘れないようにしましょう！
changeイベントが発火しない場合
change()イベントは使い方によっては正常に動作せず、意図したとおりにならないケースもあります。
例えば、テキストボックスに「val()」を使ってあとから文字列を入力する場合を見てみましょう！
<body>
<input type="text">
<button>ボタン</button>
<script>
$('input').change(function() {
console.log('変更されました！');
});
$('button').click(function() {
$('input').val('こんにちは');
})
</script>
</body>
この例では、テキストボックスとボタン要素が配置されていますね。テキストボックスに文字列を入力してフォーカスを外すとコンソールログに「変更されました！」という文字列が出力されます。
そして、ボタンをクリックするとval()を使って「こんにちは」という文字列をテキストボックスへ入力します。
しかし、この時にフォーカスを外してもコンソールログに「変更されました！」という文字列は出力されません。つまり、change()イベントが正しく動作していないわけです。
実は、テキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっています。そこで、このような時は前章でも説明した「引数なし」のchange()を実行すれば良いのです！
$('button').click(function() {
$('input').val('こんにちは').change();
})
このように、val()で文字列を代入したあとにchange()を実行すれば、意図的にchange()イベントを動作させることができるわけです。
このようなchange()の使い方も場合によっては重要なので覚えておきましょう！
まとめ
今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
