JavaScriptのOnchange Event

前回では、onclickによるイベント処理の解説を致しました。

本日のチュートリアルでは、そのイベント処理の続きとしましてonchange属性およびaddEventListener()メソッドを使用し、入力テキスト、ラジオボタン、チェックボックス、および選択要素のJavaScriptイベントについて学習します。

前回のクリックイベントはこちらの JavaScriptのボタン作成とクリックイベント処理で解説しております。

JSのchangeイベントとは？
- JSのonchangeイベントはどのように機能する？

JSのchangeイベントとは？

このイベントハンドラは、フォームフィールドが変更されたときにすぐに呼び出されるのではなく、変更後に別のフィールドが選択された後にのみ呼び出されます。

それが望ましくない場合は、oninputを使用できます。

changeイベントの構文で指定するには、主に3つの方法があります。

それぞれを見ていきましょう。

まず、要素オブジェクトを選択し、関数をonchangeプロパティにアタッチする方法です。

let element = document.getElementById("id");

element.onchange = myFunction;

要素の変更イベントにイベントハンドラをアタッチするには、addEventListener()メソッドを呼び出す方法があります。

element.addEventListener('change', function(){
    // handle change
});

または、HTML要素にonchangeイベント属性の使用です。

JSのonchangeイベントはどのように機能する？

onchangeイベントはJavaScriptのイベントの1つで、イベントがトリガーされると状態を変更し、値を変換するために使用されます。

JavaScriptのonchangeイベントは、イベント実行時に発生するイベント変更に使用される重要なイベントです。

HTML要素のタグ内に記述します。

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

onchangeの関数のオブジェクトが呼び出された後、JavaScriptが実行され、値の状態を操作および変更するか、フォーカスが変更されたときにイベントを変更および変換します。

このイベントは、oninputイベントに非常に似ています。

input.oninput = function() {
 //…
  };

違いは、oninputイベントは要素の値が変更された直後にすぐに発生し、値の変更も非常に迅速であるという点で非常にわずかな違いがあります。

一方、onchangeイベントは、ほとんどの場合ではイベントの値が実行のフォーカスを失ったときにonchangeが発生することです。

もう1つの違いは、onchangeイベントが<keygen>要素と<select>要素でも機能することです。

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

なるべく、addEventListener()メソッドを使用する方法を推奨します。　

テキスト入力要素のchangeイベント

下記では、関数をonchangeイベント属性に関連付けています。

要素の値が更新され、要素がフォーカスを失うと、changeイベントが発生し、その後 onchange が対応する機能の実行をトリガーします。

<input type="text" name="txt" value="" onchange="myFunc(this.value)">
<p id='show'>入力したらenter</p>

function myFunc(val) {
  let x = document.getElementById("show");
  x.innerHTML = "Onchange Value is: " + val;
}

See the Pen JavaScript onchangeテキスト入力 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

addEventListenerを使用して、入力要素にchangeイベントを発生させる例を見ていきましょう。

<label for="message">入力してください</label><br />
<input type="text" class="input" id="message" name="message">
<button>Click me</button>
<p id="result"></p>

let input = document.querySelector(".input");
let result = document.querySelector("#result");
input.addEventListener("change", function() {
  result.textContent = this.value;
});

See the Pen JavaScript addEventListenerでの入力changeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

<input>要素にテキストを入力し、ボタンにフォーカスを移動すると、changeイベントが発生して入力されたテキストがブラウザ上に表示されます。

また、値の変化を毎回処理したい場合は、代わりに<input>のイベントを使用するのが最も最適です。


<input type="text" id="input">oninput: <span id="result"></span>

input.oninput = function() {
    result.innerHTML = input.value;
  };

oninputでは、何も防ぐことができません、入力イベントは、値が変更された後に発生します。

つまり、そこでevent.preventDefault()を使用することはできません。

ドロップダウンでのchangeイベント

さまざまなオプションを持つドロップダウンリストでも使用されます。

onchangeイベントは、ユーザーがオプションを選択するたびに呼び出され、最新のブラウザはすべてこのイベントと互換性があります。

onchangeイベントを使用して値を選択する例を示しますが、当記事ではHTMLファイルとJavaScriptファイルに分かれています。

<h2>onchangでの値を選択</h2>
<p>言語の選択</p>
<select id="language" onchange="GetSelectedTextValue(this)">
  <option value="JavaScript">JavaScript</option>
  <option value="Java">Java</option>
  <option value="Python">Python</option>
</select>

<select>タグ内にlanguageというIDを割り当てて、ドロップダウンのリストを作成します。

このリストでは、onchange イベントに代わってJavaScript、Java、Pythonなどのさまざまなオプションが提供されています。

そのオプションのいずれかが選択されると、onchange イベントが呼び出されます。

function GetSelectedTextValue(language) {
  let sleTex = language.options[language.selectedIndex].innerHTML;
  let selVal = language.value;
  alert("Selected Text: " + sleTex + " Value: " + selVal);
}

GetSelectedTextValue()メソッドは、languageを引数として渡すことによって使用されます。

sleTex変数を使用して、 HTMLから言語の価値を抽出します。

その後にselVal変数を使用して言語の値を取得し、最後に、sleTex、selValによってテキストと値を抽出する警告のアラートボックスが生成されます。

特定のオプションが選択されると、onchange イベントが呼び出され、最後に選択したテキストの値をポップアップウィンドウに表示します。

See the Pen JavaScript onchangeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

addEventListener()メソッドを見ていきましょう。

<select id="lang">
  <option value="">Select language</option>
  <option value="JavaScript">JavaScript</option>
  <option value="Java">Java</option>
  <option value="Ruby"> Ruby</option>
  <option value="Python">Python</option>
  <option value="C++">C++</option>
</select>
<p id="result"></p>

let select = document.querySelector("#lang");
let result = document.querySelector("#result");

select.addEventListener("change", function() {
  result.innerHTML = this.value;
});

See the Pen JavaScript addEventListenerでのドロップダウン by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

<select>要素のidのlangで選択し、選択された値を<p>要素に表示します。

<input>要素はフォーカスが外れると changeイベントを発生させます。

ラジオボタン、チェックボックス、select要素は、選択された後にchangeイベントを発生させます。

ラジオボタンでのchangeイベント

まず、addEventListenerメソッドでの例を見ていきましょう。

ラジオボタンでは、選択するとchangeイベントが発生します。

下記の例は、ラジオボタンのchangeイベントを処理するものです。

<input type="radio" id="javascript" name="status">
<label for="javascript">JavaScript</label>
<input type="radio" id="java" name="status">
<label for="java">Java</label>
<input type="radio" id="python" name="status">
<label for="python">Python</label>

<p id="show"></p>

function myFunc() {
  document.body.addEventListener("change", (e) => {
    let show = document.querySelector("#show");
    let target = e.target;
    let message;
    switch (target.id) {
      case "javascript":
        message = "JavaScriptのラジオボタンに変更された";
        show.style.color = "yellow";
        break;
      case "java":
        message = "Javaのラジオボタンに変更された";
        show.style.color = "red";
        break;
      case "python":
        message = "Pythonのラジオボタンに変更された";
        show.style.color = "blue";
        break;
    }
    show.textContent = message;
  });
}

myFunc();

See the Pen JavaScript addEventListener ラジオボタンchangeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

bodyのchangeイベントにイベントハンドラを登録します。

ラジオボタンがクリックされると、そのchangeイベントがbodyにbubbling(バブリング)されます、つまり内側の要素から親を経由してバブルしていきます。

そして、Switch文の条件で、どのラジオボタンが選択されたかに応じて、caseによって対応するメッセージを表示します。

かならず、各caseにbreakキーワードを含めて下さい。

breakを使用しない場合は、プログラムがbreakまたは構造体の末尾の中括弧{}に到達するまで、後続のすべてのcaseが実行されてしまいます。

それを防ぐには、breakキーワードを使用してコードブロックを終了する必要があります。

上記のコードを、チェックボックスに置き換えるだけで、ラジオボタン同様にチェックボックスは選択後、チェックの有無に関わらずchangeイベントを発生させる事が可能です。

See the Pen JavaScript addEventListener チェックボックスchangeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

onchangeでのラジオボタンとチェックボックスは下記で確認できます。

See the Pen JavaScript onchangeラジオボタンchangeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

See the Pen JavaScript onchange チェックボックスchangeイベント by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

onchangeでは、要素がフォーカスを失ったときにのみイベントが発生することです。

これは、変更イベントが発生するたびに実行される機能を関連付けるために使用されます。

onchangeとaddEventListenerの違い

これは、前回で解説したonclickイベントと同様に、onchangeとaddEventListenerは基本的には同じですが、onchangeプロパティは既存のイベントを置き換えるので、1つのイベントしかバインドできませんが、addEventListenerは複数の変更イベント、または他のイベントをバインドすることができます。

See the Pen JavaScript onchange 複数書き換え by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

つまり、onchangeは既存のイベントを書き換えてしまいますが、addEventListenerは複数のイベントを実行可能です。

下記では、アラート通知になります。

See the Pen JavaScript onchange addEventListener複数 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

誤って他の人が以前にアタッチしたイベントリスナーを置き換えることがないので、デバッグも効率的になっております。

ブラウザの互換性の違いもあり、addEventListenerは古いIE8では動作する事はありません。

onchangeでのイベント属性は、Chrome、Internet Explorer、Firefox、Safari、Opera、Edgeなどのすべての主要なブラウザでサポートされています。

個人的には、addEventListenerの方がはるかに優れていると思っています。

ですが、これはユースケースによって異なります。

現在のすべてのイベントを置き換えたいが、新しいイベントを追加しないことが確実な場合は、onchange属性を使用します。

複数のイベントが必要な場合はaddEventListenerメソッドを使用します。