JavaScript

【JavaScript】changeイベントの使い方について徹底解説

こちらの記事では、JavaScriptのchangeイベントについてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

changeイベントとは

changeイベントはイベントの中でも使用頻度が高く、<input>(フォーム)や<select>(選択メニュー)などのユーザー操作によって要素の値が変更されたタイミングで実行されるイベントです。

changeイベントは、要素の値が変更された瞬間に必ず発火するとは限りません。
例えば、< input type=”checkbox”>の場合は要素が:checkedになった時に発火されますが、<textarea>の場合はテキストがされてからフォーカスを失った時に発火されるなど、イベントを設定する要素によって発火タイミングが異なります。

changeイベントの使い方

changeイベントは「addEventListenerメソッド」「onchangeプロパティ」「onchange属性」の3つの書き方があります。
▼トリガーになる要素を取得(addEventListenerとonchangeプロパティで使用)
const sample = document.getElementById('sample'); // トリガーになる要素を取得

▼addEventListenerメソッド
sample.addEventListener('change',function(){ // 第一引数にchangeを指定
  // 処理を記述
});

▼onchangeプロパティ
sample.onchange = function(){
  // 処理を記述
};
▼onchange属性
<select onchange="changeEvent()">
	<option value="リスト1" selected>リスト1</option>
	<option value="リスト2">リスト2</option>
	<option value="リスト3">リスト3</option>
</select>

<script>
function changeEvent(){
  // 処理を記述
};
</script>

サンプルコード

フォームの値が変更された時

下記のサンプルコードは、ユーザーがテキストボックスに入力した値を取得し表示させます。

実行結果を載せているので、試しにテキストボックスに文字を入力して表示されるか確認してみてください。
<input id="sample-input" type="text" placeholder="任意の文字を入力してください">
<p>テキストボックスに入力した文字は「<span id="sample-output"></span>」です。</p>

<script>
window.addEventListener('DOMContentLoaded',function(){
  sampleInput = document.getElementById('sample-input');
  sampleOutput = document.getElementById('sample-output');
  sampleInput.addEventListener('change',textGet,false);

  function textGet(){
    sampleOutput.textContent = this.value;
  }
});
</script>

実行結果

テキストボックスに入力した文字は「」です。

チェックボックスが変更された時

下記のサンプルコードは、チェックボックスが付いているか付いていないかを判別します。

実行結果を載せているので、試しにチェックボックスにチェックを入れると「チェック済」が表示され、チェックを外すと「未チェック」が表示されていることが確認できます。
<label>
  <input type="checkbox" id="input-checkbox" name="sample-box">
		チェックボックスをクリックして切り替えよう!
</label>
<p>チェックボックスの状態:<span id="output-checkbox"></span></p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  inputCheckbox = document.getElementById('input-checkbox');
  outputCheckbox = document.getElementById('output-checkbox');
  inputCheckbox.addEventListener('change',checkboxStatus,false);

  function checkboxStatus(){
    if(this.checked){
      outputCheckbox.textContent = "チェック済";
    } else {
      outputCheckbox.textContent = "未チェック";
    }
  }
});
</script>

実行結果

チェックボックスの状態:

セレクトボックスが変更された時

下記のサンプルコードは、セレクトボックスで選択されているメニューを判別します。

実行結果を載せているので、試しにメニューを選択すると選択されたメニューの文字が表示されていることが確認できます。
<select id="input-select" name="lists">
  <option value="リスト1">リスト1</option>
  <option value="リスト2">リスト2</option>
  <option value="リスト3">リスト3</option>
</select>
<p>選択されているのは「<span id="output-select"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputSelect = document.getElementById('input-select');
  const inputOptions = inputSelect.options;
  const outputSelect = document.getElementById('output-select');
  inputSelect.addEventListener('change',selectStatus,false);
  
  function selectStatus(){
    for(let i = 0; i < inputOptions.length; i++){
      if(inputOptions[i].selected){
        outputSelect.textContent = inputOptions[i].value;
      }
    }
  }
});
</script>

実行結果

選択されているのは「」です。

ラジオボタンが変更された時

下記のサンプルコードは、選択されたラジオボタンを判別します。

実行結果を載せているので、試しに3つあるラジオボタンの中から1つ選び選択すると、選択された文字が表示されていることが確認できます。
<form id="input-radio">
	<input name="sample-list" type="radio" value="ラジオボタン1"> ラジオボタン1
	<input name="sample-list" type="radio" value="ラジオボタン2"> ラジオボタン2
	<input name="sample-list" type="radio" value="ラジオボタン3"> ラジオボタン3
</form>
<p>選択されているのは「<span id="output-radio"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputRadio = document.getElementById('input-radio');
  const sampleList = document.getElementsByName('sample-list');
  const outputRadio = document.getElementById('output-radio');
  inputRadio.addEventListener('change',radioStatus,false);
  
  function radioStatus(){
    for(let i = 0; i < sampleList.length; i++){
      if(sampleList[i].checked){
        outputRadio.textContent = sampleList[i].value;
      }
    }
  }
});
</script>

実行結果

ラジオボタン1 ラジオボタン2 ラジオボタン3

選択されているのは「」です。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村