イベント — ユーザーの操作に反応する

「押されたら」を仕込む

ページは、ユーザーが何かするまではじっと待っています。クリック、文字の入力、こういったユーザーの操作を「イベント」と呼びます。JSでは「このイベントが起きたら、この処理をして」と“予約”しておけます。その予約が addEventListener です。

たとえるなら「玄関のチャイムが鳴ったら(イベント)、ドアを開ける(処理)」という段取りを、あらかじめ書いておく感じです。チャイムがいつ鳴るかはわからないけれど、鳴ったときの行動は先に決めておける。

const btn = document.querySelector("#go");
btn.addEventListener("click", () => {
  console.log("押された");
});

よく使うイベント: click と input

1つ目の引数がイベントの種類です。"click" はクリック、"input" は入力欄に文字を打つたびに反応します。まずはこの2つを読めれば十分です。

const field = document.querySelector("#name");
field.addEventListener("input", () => {
  console.log(field.value);
});

組み合わせ: カウンター

ここまでを合わせると、簡単なカウンターが作れます。ボタンを押すたびに数を1増やして、画面の数字を書き換える、というものです。全部書けなくて大丈夫。何をしているか読めればOKです。

let count = 0;
const btn = document.querySelector("#plus");
const num = document.querySelector("#num");
btn.addEventListener("click", () => {
  count = count + 1;
  num.textContent = count;
});

読み方の順番はこうです。(1)最初 count は 0。(2)ボタンとカウンター表示の要素をつかむ。(3)クリックされたら count を1増やす。(4)増えた count を画面(.textContent)に反映する。この“反応して書き換える”がイベントの基本形です。