Webサイトに「反応」を持たせる仕組み！ 🤖

これまで、JavaScriptでデータを処理し、DOMを操作してコンテンツを生成する方法を学んできましたね。しかし、これらはWebサイトの骨格とコンテンツを作る作業に過ぎません。Webサイトが本当に生き生きと動くのは、ユーザーの操作（クリック、キーボード入力など）に反応するときです。

この「反応」を実現するのが、イベント処理の仕組みです。イベント処理は、ユーザーとWebサイトとの間で起こるすべての出来事をJavaScriptでキャッチし、それに応じた動作（関数）を実行させるための基礎技術です。

今回は、このイベント処理の基本となる「イベントリスナー」と、最もよく使われるイベントの種類について徹底的に解説します。

1. イベント処理の仕組み：イベントリスナー
1. addEventListener()の使い方
2. よく使われる主要なイベントの種類
1. ユーザーの操作系
2. フォームと入力系
3. イベントオブジェクトの活用
まとめ：イベント処理でWebサイトをインタラクティブに！

1. イベント処理の仕組み：イベントリスナー

イベント処理の仕組みは、以下の3つのステップで成り立っています。

イベントの発生：ユーザーが要素を「クリックする」「キーボードを押す」「マウスを乗せる」などの操作を行います。
イベントの検知：JavaScriptがその出来事（イベント）を感知します。
アクションの実行：検知したイベントに応じて、あらかじめ設定しておいた処理（関数）を実行します。

この中で最も重要なのが、2番目の「イベントの検知」です。これを行うのが、**イベントリスナー（Event Listener）**です。

イベントリスナーは、「この要素で、このイベントが起こったら、この関数を実行してください」と指示するためのものです。

addEventListener()の使い方

イベントリスナーを設定する最も標準的な方法は、addEventListener()メソッドを使うことです。

JavaScript

// 1. 処理対象のDOM要素を取得
const button = document.getElementById('myButton');

// 2. イベントリスナーを設定
button.addEventListener('click', function() {
  // 3. イベント発生時に実行したい処理（関数）
  console.log('ボタンがクリックされました！');
});

addEventListener()は、以下の2つの引数を取ります。

イベントの種類：どのようなイベントを監視するか（例：'click', 'mouseover'）。
リスナー関数（コールバック関数）：イベントが発生したときに実行される関数。

2. よく使われる主要なイベントの種類

Webサイトで頻繁に使われる、基本的なイベントをいくつか紹介します。

ユーザーの操作系

イベント名	発生するタイミング	用途の例
`click`	要素がクリックされたとき	ボタンが押されたときの機能実行。
`mouseover`	マウスが要素の上に乗ったとき	要素の色を少し変えるホバーエフェクト。
`mouseout`	マウスが要素から外れたとき	ホバーエフェクトを元に戻す。
`submit`	フォームが送信されたとき	入力内容のチェック（バリデーション）。

Google スプレッドシートにエクスポート

フォームと入力系

イベント名	発生するタイミング	用途の例
`input`	フォーム要素の値が変更されるたびに	リアルタイムで入力文字数をカウント。
`change`	フォーム要素の値が確定（変更後フォーカスが外れた）したとき	プルダウン（`<select>`）で選択肢が変わったときの処理。
`keydown`	キーボードのキーが押されたとき	検索ボックスで「Enter」キーが押されたのを検知。

Google スプレッドシートにエクスポート

3. イベントオブジェクトの活用

イベントリスナーに渡される関数には、イベントが発生したときの詳細情報が詰まったイベントオブジェクトが自動的に渡されます。これを活用することで、より高度な制御が可能になります。

JavaScript

button.addEventListener('click', function(event) {
  // eventがイベントオブジェクト
  console.log('イベントの種類:', event.type); // click
  console.log('クリックされた要素:', event.target); // button要素
  
  // デフォルト動作の阻止（例: aタグのページ遷移を止める）
  event.preventDefault(); 
});

特に、フォーム送信（submit）やリンクのクリック（click）など、要素が持つブラウザのデフォルトの動作を止めたい場合に、event.preventDefault()は頻繁に使われます。