9. イベントハンドリング

イベントハンドリングとは、ユーザーの操作やブラウザの動作に応じて JavaScript コードを実行することを指します。このセクションでは、イベントハンドリングの基礎を学びます。具体的には、基本的なイベントの種類、イベントリスナーの設定、イベントオブジェクトの活用について紹介します。

9.1 イベントの種類

まずは代表的なイベントの種類について理解しましょう。

クリックイベント（click）: マウスで要素をクリックしたときに発生します。
マウスオーバーイベント（mouseover）: マウスを要素の上に乗せたときに発生します。
キーダウンイベント（keydown）: キーボードのキーを押したときに発生します。
フォームサブミットイベント（submit）: フォームを送信したときに発生します。

9.2 イベントリスナーの設定

イベントリスナーは、特定のイベントが発生したときに実行される関数です。イベントリスナーの設定方法にはいくつかの方法がありますが、ここでは代表的なものを紹介します。

9.2.1 addEventListener メソッド

addEventListenerメソッドを使ってイベントリスナーを設定する方法です。この方法が最も一般的で広く推奨されています。

<!DOCTYPE html>
<html>
  <head>
    <title>イベントハンドリングの基本</title>
  </head>
  <body>
    <button id="myButton">クリックしてね</button>

    <script>
      // ボタン要素を取得する
      const button = document.getElementById("myButton");

      // クリックイベントリスナーを設定する
      button.addEventListener("click", function () {
        alert("ボタンがクリックされました！");
      });
    </script>
  </body>
</html>

上記の例では、ボタンをクリックするとアラートが表示されます。

9.2.2 HTML 属性として設定

HTML の属性としてイベントリスナーを設定する方法もあります。

<!DOCTYPE html>
<html>
  <head>
    <title>イベントハンドリングの基本</title>
  </head>
  <body>
    <button id="myButton" onclick="handleClick()">クリックしてね</button>

    <script>
      function handleClick() {
        alert("ボタンがクリックされました！");
      }
    </script>
  </body>
</html>

この方法も使用可能ですが、addEventListenerを使用する方が推奨されます。

9.3 イベントオブジェクト

イベントが発生すると、イベントに関する情報が詰まったイベントオブジェクトが渡されます。例えば、クリックイベントの場合、どのボタンがクリックされたか、クリックの位置はどこか、などの情報が含まれます。

<!DOCTYPE html>
<html>
  <head>
    <title>イベントオブジェクトの利用</title>
  </head>
  <body>
    <button id="myButton">クリックしてね</button>

    <script>
      const button = document.getElementById("myButton");

      // クリックイベントリスナーを設定する
      button.addEventListener("click", function (event) {
        // イベントオブジェクトを利用する
        console.log("クリックされた座標: ", event.clientX, event.clientY);
      });
    </script>
  </body>
</html>

ここでは、クリックされた位置の座標をコンソールに出力しています。

9.4 イベントの削除

設定されたイベントリスナーは、不要になった場合に削除することもできます。

<!DOCTYPE html>
<html>
  <head>
    <title>イベントリスナーの削除</title>
  </head>
  <body>
    <button id="myButton">クリックしてね</button>
    <button id="removeListenerButton">イベントリスナーを削除</button>

    <script>
      const button = document.getElementById("myButton");
      const removeButton = document.getElementById("removeListenerButton");

      function showAlert() {
        alert("ボタンがクリックされました！");
      }

      // イベントリスナーを設定する
      button.addEventListener("click", showAlert);

      // イベントリスナーを削除する関数を設定する
      removeButton.addEventListener("click", function () {
        button.removeEventListener("click", showAlert);
        alert("イベントリスナーが削除されました。");
      });
    </script>
  </body>
</html>

この例では、「イベントリスナーを削除」ボタンをクリックすると、myButtonのクリックイベントリスナーが削除されます。

これで、基本的なイベントハンドリングについて理解が深まったと思います。次に、実際にいろいろなイベントを設定して試してみてください。