これまでは、JavaScriptの基本的な文法や、関数を使った処理のまとめ方を学んできました。この章では、イベントという概念を学び、ユーザーの操作に反応するプログラムを作ってみましょう。

1. イベントって何？

イベントとは、ウェブページ上で何かが起こったことを表す仕組みです。例えば、以下のようなものがイベントです。

• ボタンがクリックされた
• マウスカーソルが要素の上に移動した
• キーボードのキーが押された
• フォームの内容が送信された
• ページの読み込みが完了した

これらのイベントが発生したときに、特定の処理を実行するように設定することができます。これを「イベントを捉える」といいます。

イベントを捉えることができれば、ユーザーの操作に応じて、ページの見た目を変えたり、新しい機能を提供したりすることができるようになります。つまり、よりインタラクティブなウェブページを作ることができるのです！

2. イベントを捉える

JavaScriptでイベントを捉えるには、主に以下の2つの方法があります。

1. HTMLの属性として設定する
2. addEventListenerメソッドを使う

ただし、後述しますが、1つ目の方法は古いやり方です。 現在では、2つ目のaddEventListenerメソッドを使う方法が推奨されています。

addEventListenerメソッドを使う

addEventListenerは、特定のHTML要素にイベントリスナーを登録するためのメソッドです。イベントリスナーとは、イベントが発生したときに実行される関数のことです。

addEventListenerの基本的な構文は、以下のとおりです。

element.addEventListener(イベント名, イベントリスナー関数);

• element: イベントを監視したいHTML要素を指定します。
• イベント名: 発生を監視するイベントの名前を文字列で指定します。
• イベントリスナー関数: イベントが発生したときに実行する関数を指定します。

例えば、buttonというIDを持つボタンがクリックされたときに、handleClickという関数を実行したい場合は、以下のように書きます。

const button = document.getElementById("button");

function handleClick() {
  console.log("ボタンがクリックされました！");
}

button.addEventListener("click", handleClick);

このコードでは、

1. document.getElementById("button")で、buttonというIDを持つHTML要素を取得し、buttonという変数に格納しています。
2. handleClickという関数を定義しています。この関数は、コンソールに「ボタンがクリックされました！」と表示するだけの簡単なものです。
3. button.addEventListener("click", handleClick)で、button要素にclickイベントのイベントリスナーを登録しています。clickイベントが発生すると、handleClick関数が実行されます。

よく使われるイベント

よく使われるイベントには、以下のようなものがあります。

• click: 要素がクリックされたとき
• mouseover: マウスカーソルが要素の上に乗ったとき
• mouseout: マウスカーソルが要素の上から離れたとき
• keydown: キーボードのキーが押されたとき
• keyup: キーボードのキーが離されたとき
• submit: フォームが送信されたとき
• load: ページや画像などのリソースの読み込みが完了したとき

これらのイベント名をaddEventListenerの第1引数に指定することで、様々なイベントを捉えることができます。

イベントオブジェクト

イベントが発生したとき、イベントリスナー関数にはイベントオブジェクトという特別なオブジェクトが渡されます。イベントオブジェクトには、発生したイベントに関する情報が格納されています。

例えば、clickイベントのイベントオブジェクトには、クリックされた座標や、どのボタンがクリックされたかなどの情報が含まれています。

イベントオブジェクトを使うと、イベントの詳細な情報を取得したり、イベントのデフォルトの動作をキャンセルしたりすることができます。

イベントオブジェクトは、イベントリスナー関数の第1引数として渡されます。慣例的にeventまたはeという名前の引数で受け取ることが多いです。

function handleClick(event) {
  console.log("クリックされた座標:", event.clientX, event.clientY);
}

この例では、handleClick関数の引数eventでイベントオブジェクトを受け取り、event.clientXとevent.clientYでクリックされた座標を取得しています。