JavaScriptで要素を変更した時に処理を発生させる方法

この記事では、JavaScriptのaddeventlistener()を用いて要素の内容が変更された時に処理を発動させる方法について見ていきたいと思います。

addeventlistener()とは

addeventlistener()は、指定した対象に指定したイベントが発生した際に処理を発動させることができるメソッドです。

addeventlistener()の書き方

対象.addeventlistener(イベントの種類, 処理)

※対象には「window」「document」「HTML要素」などを指定します。
※処理は関数で指定します

addeventlistener()で要素を変更した時に処理を発動させる方法

addeventlistener()で対象となる要素を変更した時に処理を発動させるにはイベントの種類にchangeを指定します。
対象となる要素はinput要素・select要素・textarea要素になります。

ではさっそく見ていきましょう。

書き方

対象.addeventlistener(“change”, 処理)

「change」イベントを用いた例

対象をinput要素にした場合

・HTML

<input type="text" id="text">
<p id="message"></p>

・JavaScript

let text = document.getElementById("text");
let message = document.getElementById("message");

text.addEventListener("change", () => {
  message.textContent = text.value;
});

この例では、input要素を変更してフォーカスを他に移すと入力した内容が下に表示されます。

尚、ここで用いているgetElementById()については以下の記事を参照していただくことができます。
JavaScriptのgetElementById()の使い方

では見てみましょう。
下の入力欄に何か文字を入力してカーソルを別の場所に移してみて下さい。

入力欄の下に入力した内容が表示されていますね。

では次にselect要素を用いた例を見てみましょう。

対象をselect要素にした場合

・HTML

<select id="fruits">
  <option>選択してください。</option>
  <option>りんご</option>
  <option>いちご</option>
  <option>バナナ</option>
</select>
<p id="message"></p>

・JavaScript

let fruits = document.getElementById("fruits");
let message = document.getElementById("message");

fruits.addEventListener("change", () => {
  message.textContent = fruits.value;
});

この例では、セレクトボックスの選択した項目が下に表示されるようになっています。

セレクトボックスのどれかを選択すると下に選択した項目が表示されますね。

まとめ

以上に見てきたように、

addeventlistener()でイベントの種類に「change」を指定するとinput要素やselect要素などが変更されたタイミングで処理を発生させることができます。