GlobalEventHandlers.onchange

GlobalEventHandlers ミックスインの onchange プロパティは、change イベントを処理する event handler です。

change イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。

注記: oninput と異なり、onchange イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

構文

target.onchange = functionRef;

functionRef は関数名または関数式です。この関数は、Event オブジェクトとその 1 個の引数を受け取ります。

例

この例は、<input> 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。

HTML

<input type="text" placeholder="Type something here, then click outside of the field." size="50">
<p id="log"></p>

JavaScript

let input = document.querySelector('input');
let log = document.getElementById('log');

input.onchange = handleChange;

function handleChange(e) {
  log.textContent = `The field's value is
      ${e.target.value.length} character(s) long.`;
}

実行結果

仕様

仕様書	策定状況	備考
HTML Living Standard onchange の定義	現行の標準

ブラウザー実装状況

BCD tables only load in the browser