このガイドでは、JavaScript の「onchange」イベントの目的と動作について説明します。
JavaScript で「onchange」イベントを使用するにはどうすればよいですか?
” 変更中 」イベントは、指定された HTML 要素の値が変更されたときにアクティブになります。このイベントがトリガーされると、関連付けられた JavaScript 関数が実行され、特定のタスクが実行されます。
構文
物体。 変更中 = 関数 ( ) { マイスクリプト } ;
上記の構文では次のようになります。
- エレメント： これは、特定の HTML 要素を示します。
- 関数（）： これは、イベント トリガーで呼び出される定義された関数を表します。
- 私のスクリプト: これは、「onchange」イベントが発生したときに特定のタスクを実行するための JavaScript 関数定義を参照します。
構文(addEventListener()メソッド使用時)
物体。 addEventListener ( '変化' 、マイスクリプト ) ;
上記の構文では、「 addEventListener() ”メソッドは”を利用します。 変更中 」イベントを使用して、さまざまなタスクを実行するための JavaScript 関数を実行します。
例 1: 基本構文を使用して「onchange」イベントを適用して選択した値を表示する
このシナリオでは、「onchange」イベントがオプション リストに関連付けられ、変更されたオプション値を表示し、対応する JavaScript 関数を呼び出します。
HTMLコード
次の HTML コードを見てください。
< h2 > 変更中 イベント JavaScriptで h2 >< p > リストから別の言語を選択してください。 p >
< IDを選択してください = 'デモ' 変更中 = 'サンプル（）' >
< オプションの値 = 「HTML」 > HTML オプション >
< オプションの値 = 「CSS」 > CSS オプション >
< オプションの値 = 「ジャバスクリプト」 > JavaScript オプション >
選択する >
< PID = 「P1」 > p >
上記のコードでは次のようになります。
- まず、「」を使用して小見出しを定義します。 ' 鬼ごっこ。
- 次に、記載されたステートメントを含む段落を追加します。
- その後、「 <選択> ” タグは、割り当てられた ID を持つドロップダウン リストを作成します。” デモ ' そしてその ' 変更中 「イベントは関数にリダイレクトされます」 サンプル（） '、 それぞれ。
- 「
- 最後に、ID「」を持つ空の段落が作成されます。 P1 」を選択すると、オプションリストから選択/変更した値が表示されます。
JavaScript コード
ここで、次の JavaScript コードの概要を説明します。
< 脚本 >関数サンプル ( ) {
どこ = 書類。 getElementById ( 'デモ' ) 。 価値 ;
書類。 getElementById ( 「P1」 ) 。 内部HTML = 「選択されたオプションは次のとおりです:」 + t ;
}
脚本 >
上記のコード ブロックでは次のようになります。
- まず、「」という名前の関数を宣言します。 サンプル（） ”。
- その定義では、「」を適用します。 getElementById() ” メソッドを使用して、オプション リストから選択したオプションの値にアクセスします。 価値 ' 財産。
- 最後に「」を使って値を表示します。 内部HTML ' 財産。
出力
出力に見られるように、ドロップダウンからオプションを選択すると、「onchange」イベントがトリガーされ、対応する関数が呼び出されます。
例 2: 「addEventListener()」メソッド構文を使用して「onchange」イベントを適用して入力フィールドのテキストを大文字に変更する
この例では、「addEventListener()」メソッドを使用して入力テキストフィールドを「大文字」に変更することで機能する「onchange」イベントについて説明します。
HTMLコード
まず、以下に示す HTML コードを実行します。
< h2 > 変更中 イベント JavaScriptで h2 >名前 : < 入力方式 = '文章' ID = 'デモ' >
< ボタン > 送信 ボタン >
上記の HTML コードでは次のようになります。
- 「」を介してレベル 2 の小見出しを定義します。 ' 鬼ごっこ。
- 次に、「」を追加します。 <入力> ラベル「」のフィールド 名前 ”、コンテンツタイプ” 文章 ”、および関連付けられた ID ” デモ '、 それぞれ。
- 最後に、「」を使用してボタンを含めます。 <ボタン> ' 鬼ごっこ。
JavaScript コード
次に、次の JavaScript コードを見てください。
< 脚本 >書類。 getElementById ( 'デモ' ) 。 addEventListener ( '変化' 、 サンプル ) ;
関数サンプル ( ) {
どこ = 書類。 getElementById ( 'デモ' ) ;
t. 価値 = t. 価値 。 大文字へ ( ) ;
}
脚本 >
このコード ブロックでは次のようになります。
- まず、「 document.getElementById() ”メソッドは”を利用します。 変化 ” ID を持つ入力テキストフィールドの値を変更するイベント” デモ 」ボタンをクリックすると表示されます。
- 次に、関数「Sample()」が定義されています。この関数は、「document.getElementById()」メソッドを利用して入力テキストフィールド「demo」にアクセスし、その値を「大文字」に変更します。 大文字() ' 方法。
出力
ご覧のとおり、ボタンをクリックすると入力テキストが大文字に変換されます。
結論
JavaScript は一般的に使用される「 変更中 」イベントは、特定の要素の値の状態が変化するとすぐにトリガーされます。 「」に似ています。 入力時 」イベントですが、「oninput」は値が変化すると即座に発生しますが、「onchange」イベントはイベントの値がフォーカスを失ったときにトリガーされます。このガイドでは、JavaScript での「onchange」イベントの目的、仕組み、使用法について説明しました。