onchangeイベント

DOM イベント Event オブジェクト

定義と用法

要素の値が変更されたとき、onchangeイベントが発生します。

単選ボックスと複選ボックスが選択状態が変更されたとき、onchangeイベントが発生します。

ヒント：このイベントは、以下に似ています： oninput イベント。違いは、oninput イベントが要素の値が変更された後にすぐに発生するのに対し、onchange は要素がフォーカスを失い内容が変更された後に発生することです。もう一つの違いは、onchange イベントが <select> 要素にも適用されることです。

インスタンス

例 1

ユーザーが <select> 要素の選択オプションを変更したときに JavaScriptを実行します：

<select onchange="myFunction()">

自分で試してみてください

例 2

ユーザーが入力フィールドの内容を変更したときに JavaScriptを実行します：

<input type="text" onchange="myFunction()">

自分で試してみてください

構文

HTML で：

<element onchange="myScript">

自分で試してみてください

JavaScript で：

object.onchange = function(){myScript};

自分で試してみてください

JavaScript で addEventListener() メソッドを使用する方法：

object.addEventListener("change", myScript);

自分で試してみてください

注釈：Internet Explorer 8 またはそれ以前のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポートされていません
イベントタイプ： Event
サポートされている 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 イベント

ブラウザのサポート

イベント Chrome IE Firefox Safari Opera
onchange サポート サポート サポート サポート サポート
DOM イベント Event オブジェクト