JavaScriptを基本からまとめてみた【11】【onchangeイベント】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##JavaScriptのonchangeイベントとは
『onchangeイベント』とは、入力欄の内容を変更した時のイベント。JavaScriptでプログラミングを行っていると、ユーザーの入力に合わせて動的に表示内容を変えたい場合に便利なのがonchangeイベントで、HTML要素の値の変更が完了した時に発生するイベント。

対象のHTML要素は と 、及び で、値の変更が完了したタイミングは、 と は入力が完了して他の要素にフォーカスが移動した時、 は選択値が変わった時になる。

##onchangeイベントの書き方
onchangeイベントの書き方は2つある。
####① HTMLで指定する方法

<input onchange="関数名()">

####② JavaScriptで指定する方法
document.getElementById(“要素名”)で対象の要素を指定する。関数名を指定せず、以下のように直接function()を記述できる。※ onchangeのようなイベントが発生した時に動作する関数をイベントハンドラーと呼びます。

document.getElementById("要素名").onchange = function() {
  // onchangeイベントが発生した時の処理を記述する
};

##参考サイト
[アルファシス]
(http://alphasis.info/2013/09/javascript-dom-event-onchange/)
[JavaScriptのonchangeイベントの使い方を現役エンジニアが解説【初心者向け】]
(https://techacademy.jp/magazine/20723)