2024.02.26
onchange（JavaScript）の使い方を解説
「onchange」イベントは、JavaScriptで広く使用される重要なイベントの一つです。
このイベントは、HTML要素の値が変更された際に発生し、ウェブページ上でのユーザーのインタラクションに応じた動的な挙動を実現します。
本記事では、onchangeイベントの基本的な使い方から、応用例に至るまでをわかりやすく解説します。フォーム要素の値が変更された際の検知、ページの動的な更新、ユーザー体験の向上に役立つこのイベントの活用方法を学びましょう。
この記事でわかること
- JavaScriptのonchange使い方
- JavaScriptのonchangeサンプルコード
目次
onchangeイベントとは？
onchange イベントは、HTML要素の値が変更されたときに発生するイベントです。
これは、ユーザーがフォームに入力したり、ドロップダウンリストからオプションを選択したり、チェックボックスをオン/オフしたりするなど、さまざまな状況で発生します。
onchange イベントは、以下のようなさまざまな目的に使用できます。
- 入力内容の検証
- フォームデータの送信
- 動的なコンテンツの更新
- ユーザーインターフェースの変更
onchangeイベント発生時の動作
onchange イベントは、ユーザーが要素の値を変更し、フォーカスがその要素から離れたときに発生します。つまり、ユーザーが要素に入力し、別の要素に移動したり、Enterキーを押したりするまでイベントは発生しません。
ただし、以下の例外があります。
- select 要素の場合、ユーザーがオプションを選択した時点でイベントが発生します。
イベントハンドラの登録
onchange イベントハンドラは、HTML要素の onchange 属性を使用して登録できます。属性値には、イベント発生時に実行されるJavaScript関数を指定します。
イベントハンドラの登録例
下記の例では、myFunction 関数は、ユーザーがテキスト入力フィールドに入力内容を変更するたびに実行されます。
| <input type=”text” onchange=”myFunction()”> |
イベントオブジェクト
onchange イベントが発生すると、イベントオブジェクトが生成されます。このオブジェクトには、イベントに関するさまざまな情報が含まれています。
イベントオブジェクトの主なプロパティは以下のとおりです。
- target: イベントが発生した要素
- value: 変更された要素の値
- type: イベントの種類
イベントオブジェクトの例
下記の例では、myFunction 関数は、ユーザーがテキスト入力フィールドに入力内容を変更するたびに、変更された値をコンソールに出力します。
| function myFunction(event) { // event.target は、イベントが発生した要素を指します // event.value は、変更された要素の値を取得します // event.type は、イベントの種類を取得します console.log(event.target.value); } |
応用例
以下は、onchange イベントの応用例です。
入力内容の検証
ユーザーが入力した値が正しいかどうかを検証するために使用できます。
下記の例では、validateEmail 関数は、ユーザーがテキスト入力フィールドに入力した値が有効なメールアドレスかどうかを検証します。
| function validateEmail(event) { // event.target は、イベントが発生した要素を指します // event.value は、変更された要素の値を取得します var email = event.target.value; var regex = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (!regex.test(email)) { alert(“無効なメールアドレスです”); } } |
フォームデータの送信
ユーザーがフォームに入力したデータをサーバーに送信するために使用できます。
下記の例では、submitForm 関数は、ユーザーがフォームに入力したデータをサーバーに送信します。
| function submitForm(event) { // event.target は、イベントが発生した要素を指します // event.preventDefault() は、フォームの送信をキャンセルします event.preventDefault(); var data = new FormData(document.getElementById(“myForm”)); // サーバーにデータを送信する処理 } |
まとめ
onchange イベントは、HTML要素の値が変更されたときに発生するイベントです。このイベントは、さまざまな目的に使用できます。
イベントハンドラの登録方法と、イベントオブジェクトの主なプロパティについて理解することで、onchange イベントを効果的に活用することができます。
