JavaScriptのchangeイベントは、フォーム要素（例えば、<input>、<select>、<textarea>など）の値が変更された際に発生するイベントです。このイベントはユーザー入力を処理する際に非常に便利で、特にフォームのバリデーションや動的なUI更新に活用されます。今回は、changeイベントの基本から応用的な使い方までをまとめていきたいと思います。
changeイベントは、フォーム要素の値が変更され、その変更が確定したタイミングで発生します。
- テキスト入力要素 (
<input type="text">,<textarea>): 値が変更され、かつ要素からフォーカスが外れたときに発生します。 - チェックボックスやラジオボタン (
<input type="checkbox">,<input type="radio">): ユーザーが選択状態を変更した瞬間に発生します。 - セレクトボックス (
<select>): ユーザーが選択肢を変更した瞬間に発生します。
以下は、<input>要素にchangeイベントを使用した基本的な例です。
See the Pen change() by tones (@tonescodedesign) on CodePen.
const input = document.getElementById('username');
const output = document.getElementById('output');
input.addEventListener('change', () => {
output.textContent = `入力された名前: ${input.value}`;
}); <label for="username">ユーザー名:</label>
<input type="text" id="username">
<p id="output">入力された内容がここに表示されます。</p>この例では、<input>要素の値が変更され、かつフォーカスが外れたときに変更内容が表示されます。
次に、<select>要素を使用して、選択された内容に応じて画面を更新する例を示します。
See the Pen change() by tones (@tonescodedesign) on CodePen.
const colorSelect = document.getElementById('colorSelect');
const colorOutput = document.getElementById('colorOutput');
colorSelect.addEventListener('change', () => {
colorOutput.textContent = `選択された色: ${colorSelect.value}`;
});<label for="colorSelect">色を選んでください:</label>
<select id="colorSelect">
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
<p id="colorOutput">選択された色: なし</p>このコードでは、セレクトボックスの選択肢を変更すると、その内容がリアルタイムで表示されます。
次に、複数のチェックボックスが選択された状態を集計する例を紹介します。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
const checkboxes = document.querySelectorAll('input[name="option"]');
const selectedOptions = document.getElementById('selectedOptions');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', () => {
const selected = Array.from(checkboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value);
selectedOptions.textContent = `選択されたオプション: ${selected.join(', ') || 'なし'}`;
});
});<label><input type="checkbox" name="option" value="Option 1"> オプション1</label>
<label><input type="checkbox" name="option" value="Option 2"> オプション2</label>
<label><input type="checkbox" name="option" value="Option 3"> オプション3</label>
<p id="selectedOptions">選択されたオプション: なし</p>この例では、チェックボックスの選択状態をリアルタイムで集計し、画面に表示しています。
- フォーカスが外れるタイミング: テキスト入力の場合、値を変更してもフォーカスが外れないと
changeイベントは発生しません。リアルタイムで変更を検知したい場合はinputイベントを使用すると良いでしょう。 - ラジオボタンのグループ: ラジオボタンの値変更はグループ全体に影響します。そのため、適切に
name属性を設定してグループ化しましょう。 - クロスブラウザ対応: 現在の主要ブラウザでは
changeイベントがサポートされていますが、古いブラウザをサポートする場合は注意が必要です。
changeイベントは、フォーム要素の値変更を検知する際に非常に便利なイベントです。基本的な使い方を押さえた上で、セレクトボックスやチェックボックスなど様々なフォーム要素に適用することで、動的で使いやすいユーザーインターフェースを作成できます。
