onchangeイベント
例
ユーザーが<select>要素の選択されたオプションを変更したときにJavaScriptを実行します。
<select onchange="myFunction()">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
onchangeイベントは、要素の値が変更されたときに発生します。
ラジオボタンとチェックボックスの場合、onchangeイベントは、チェックされた状態が変更されたときに発生します。
ヒント：このイベントは、 oninputイベントに似ています。違いは、oninputイベントは要素の値が変更された直後に発生するのに対し、onchangeは、コンテンツが変更された後、要素がフォーカスを失ったときに発生することです。もう1つの違いは、onchangeイベントが<select>要素でも機能することです。
ブラウザのサポート
| Event | |||||
|---|---|---|---|---|---|
| onchange | Yes | Yes | Yes | Yes | Yes |
構文
HTMLの場合：
<element onchange="myScript">
JavaScriptの場合：
object.onchange = function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
object.addEventListener("change", myScript);
注： addEventListener （）メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
| 泡： | はい |
|---|---|
| キャンセル可能： | 番号 |
| イベントタイプ： | イベント |
| サポートされているHTMLタグ： | <input type = "checkbox">、<input type = "color">、<input type = "date">、<input type = "datetime">、<input type = "email">、<input type = " file ">、<input type =" month ">、<input type =" number ">、<input type =" password ">、<input type =" radio ">、<input type =" range ">、< input type = "search">、<input type = "tel">、<input type = "text">、<input type = "time">、<input type = "url">、<input type = "week ">、<select>、<textarea> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
ユーザーが入力フィールドの内容を変更したときにJavaScriptを実行します。
<input type="text"
onchange="myFunction()">