イベントを理解する（クリック）JavaScript 初学者講座

WEBページではユーザーからの入力を受け取り、なんらかの応答を返すという処理が随時行われています。入力の代表的なものをいくつか挙げますと、

ページが読み込まれる
マウスオーバー
クリック、タップ、ドラッグ
ページをスクロール
フォームにテキストを入力

などがあります。
JavaScriptの「イベント」とはWEBページ内で起こる何らかのアクションを指します。

イベントを関連づける addEventListener
イベントの情報を受け取る
終わりに

イベントを関連づける addEventListener

今回は一般的な入力としてクリックをした際に、何かを動作させるということを勉強していきましょう。
まずはサンプルのプログラムを書きます。HTMLとJavaScriptの記述があるので、まとめてHTMLのファイル内に書いていきます。

<button class="button">ボタン</button>

<script>

  // .buttonの要素を取得
  const button = document.querySelector(".button");

  // クリック時に実行する関数を定義
  const clickButton = () => {
    console.log("test");
  }

  // イベントを関連づける
  button.addEventListener('click', clickButton);
</script>

上記の流れではボタンの要素を取得し、関数の定義、クリックイベントへの関連づけをおこなっています。ここで使用した addEventListener はイベント、イベントターゲット、イベントリスナーを関連づける関数です。

イベント
上記のプログラムで言うところのイベントは「click」になり、ブラウザからのクリック操作を受け取るようになっています。

イベントターゲット
イベントを発生させるオブジェクトのことをイベントターゲットと呼びます。上記の場合は「button」がそのオブジェクトになります。

イベントリスナー
イベントターゲットからイベントが発生した時に実行するプログラムをイベントリスナーと呼びます。ここでは関数clickButtonを実行しています。

addEventListenerメソッドの使い方をまとめると下記のようになります。

イベントターゲット.addEventListener(イベント名, イベントリスナー, [オプション（省略可）])

上記では関数を記載しましたが、下記のように直接プログラムを記述することもできます。

button.addEventListener('click', function() {
  console.log("test");
});

// アロー関数の場合
button.addEventListener('click', () => {
  console.log("test");
});

イベントの情報を受け取る

addEventListenerは引数としてイベント情報を持っています。次のように記述を変更し、イベント情報をコンソールに出力しましょう。

<button class="button">ボタン</button>
<script>
  const button = document.querySelector(".button");

  button.addEventListener('click', (event) => {
    console.log(event);
  });
</script>

コンソールを確認するとオブジェクトに様々なデータが代入されています。このイベント情報は様々なプログラムに活用することができますが全てを覚える必要はないので、この時点ではaddEventListenerにはイベント情報が含まれている ということだけ覚えておきましょう。

試しにこのイベント情報を使って、bodyの色を変更するプログラムを書きます。

<button class="button">ボタン</button>
<script>
  const body = document.querySelector("body");
  const button = document.querySelector(".button");

  button.addEventListener('click', (event) => {
    if(event.timeStamp < 5000) {
      body.style.backgroundColor = "red";
    } else {
      body.style.backgroundColor = "blue";
    }
  });
</script>

コードの実行サンプル

上記のプログラムではイベント情報に代入されているtimeStampを取得して、ボタンを押した際のbody要素の背景色を変化させています。
timeStamp内にはページが読み込まれてから、ボタンを押すまでの時間がミリ秒で入っています。１秒＝1000ミリ秒なので条件分岐には「5000ミリ秒未満」となっています。そのため押した時間によってbody要素の背景色が赤か青で変わるようになっています。（もう一度試して見たい場合はページを再読み込みしてください）