onchange（JavaScript）の使い方を解説

JavaScript サンプルコード

「onchange」イベントは、JavaScriptで広く使用される重要なイベントの一つです。

このイベントは、HTML要素の値が変更された際に発生し、ウェブページ上でのユーザーのインタラクションに応じた動的な挙動を実現します。

本記事では、onchangeイベントの基本的な使い方から、応用例に至るまでをわかりやすく解説します。フォーム要素の値が変更された際の検知、ページの動的な更新、ユーザー体験の向上に役立つこのイベントの活用方法を学びましょう。

この記事でわかること

JavaScriptのonchange使い方
JavaScriptのonchangeサンプルコード

1 onchangeイベントとは？
2 onchangeイベント発生時の動作
3 イベントハンドラの登録
- 3.1 イベントハンドラの登録例
4 イベントオブジェクト
- 4.1 イベントオブジェクトの例
5 応用例
- 5.1 入力内容の検証
- 5.2 フォームデータの送信
6 まとめ
7 投稿者

onchangeイベントとは？

onchange イベントは、HTML要素の値が変更されたときに発生するイベントです。

これは、ユーザーがフォームに入力したり、ドロップダウンリストからオプションを選択したり、チェックボックスをオン/オフしたりするなど、さまざまな状況で発生します。

onchange イベントは、以下のようなさまざまな目的に使用できます。

入力内容の検証
フォームデータの送信
動的なコンテンツの更新
ユーザーインターフェースの変更

onchangeイベント発生時の動作

onchange イベントは、ユーザーが要素の値を変更し、フォーカスがその要素から離れたときに発生します。つまり、ユーザーが要素に入力し、別の要素に移動したり、Enterキーを押したりするまでイベントは発生しません。

ただし、以下の例外があります。

select 要素の場合、ユーザーがオプションを選択した時点でイベントが発生します。

イベントハンドラの登録

onchange イベントハンドラは、HTML要素の onchange 属性を使用して登録できます。属性値には、イベント発生時に実行されるJavaScript関数を指定します。

イベントハンドラの登録例

下記の例では、myFunction 関数は、ユーザーがテキスト入力フィールドに入力内容を変更するたびに実行されます。

イベントオブジェクト

onchange イベントが発生すると、イベントオブジェクトが生成されます。このオブジェクトには、イベントに関するさまざまな情報が含まれています。

イベントオブジェクトの主なプロパティは以下のとおりです。

target: イベントが発生した要素
value: 変更された要素の値
type: イベントの種類

イベントオブジェクトの例

下記の例では、myFunction 関数は、ユーザーがテキスト入力フィールドに入力内容を変更するたびに、変更された値をコンソールに出力します。

function myFunction(event) {
// event.target は、イベントが発生した要素を指します
// event.value は、変更された要素の値を取得します
// event.type は、イベントの種類を取得します

console.log(event.target.value);
}

応用例

以下は、onchange イベントの応用例です。

入力内容の検証

ユーザーが入力した値が正しいかどうかを検証するために使用できます。

下記の例では、validateEmail 関数は、ユーザーがテキスト入力フィールドに入力した値が有効なメールアドレスかどうかを検証します。

フォームデータの送信

ユーザーがフォームに入力したデータをサーバーに送信するために使用できます。

下記の例では、submitForm 関数は、ユーザーがフォームに入力したデータをサーバーに送信します。

function submitForm(event) {
// event.target は、イベントが発生した要素を指します
// event.preventDefault() は、フォームの送信をキャンセルします

event.preventDefault();

var data = new FormData(document.getElementById(“myForm”));

// サーバーにデータを送信する処理
}