「ボタンをクリックしたらメニューが開く」
「マウスを乗せたら画像が切り替わる」
「キーワードを入力したら文字数がカウントされる」
Webサイトで見かけるこれらの動きは、すべてJavaScriptの「イベント」という仕組みを使っています。
別記事で学んだ「JavaScriptのDOM操作とは？HTMLを書き換える方法と使い方を初心者向けに解説」では、HTMLの中身を書き換える方法を学びました。本記事では、それを「いつ」実行するかというキッカケ（タイミング）を作る方法を解説します。これができるようになると、あなたのサイトは「静かなページ」から「ユーザーの動きに反応する生きたサイト」へと進化します。
まずは完成形を見てみよう！
言葉で説明する前に、まずは今回作れるようになるプログラムの完成形を見てみましょう。
【HTML】
<button id="magic-btn">ボタンを押してみて！</button>
<p id="message">ここに結果が出ます</p>【JavaScript】
const btn = document.querySelector('#magic-btn');
const text = document.querySelector('#message');
// 「クリック」というイベントを「待ち構える」
btn.addEventListener('click', () => {
text.textContent = '魔法がかかりました！';
text.style.color = 'orange';
text.style.fontWeight = 'bold';
});この数行のコードを書くだけで、ユーザーの操作に反応してリアルタイムに画面が書き変わります。この「きっかけ」を管理している司令塔がaddEventListenerです。
JavaScriptの「イベント」とは？
プログラミングにおけるイベントとは、「ブラウザ上で起きた出来事（アクション）」のことです。
ブラウザは常にユーザーの動きを監視しています。ユーザーが何かをしたとき、あるいはブラウザ自体の状態が変わったとき、ブラウザは「今、クリックされたよ！」「今、画面が最後までスクロールされたよ！」という信号（イベント）を発信しています。
代表的なイベントの例
JavaScriptがキャッチできるイベントは驚くほどたくさんあります。
- マウス操作：click（クリック）、dblclick（ダブルクリック）、mouseenter（マウスが乗った）
- キーボード操作：keydown（キーを押した）、keyup（キーを離した）
- フォーム操作：input（文字入力中）、change（内容確定）、submit（送信）
- ブラウザ操作：scroll（スクロール）、resize（画面サイズ変更）、load（読み込み完了）
JavaScriptの仕事は、これらの無数の信号の中から「特定の信号だけをキャッチして、あらかじめ決めておいた処理を実行すること」に集約されます。
addEventListener（イベントリスナー）の仕組み
イベントをキャッチするために最も使われるのがaddEventListenerメソッドです。直訳すると「イベントを待ち構える人（リスナー）を追加する」という意味になります。
基本の構文を解剖する
対象の要素.addEventListener('イベントの種類', () => {
// 実行したい処理
});このメソッドは、大きく分けて3つのパーツで構成されています。
- 対象の要素：querySelectorなどで取得した「誰に」対する操作か。
- イベントの種類：‘click’や‘input’など、何を「きっかけ」にするか。
- 実行したい処理（コールバック関数）：きっかけが発生したときに動かすコード。現代ではアロー関数を使って書くのが主流です。
「待ち伏せ」という考え方
addEventListenerを実行した瞬間、プログラムがその場で動くわけではありません。ブラウザに対して「もしこのボタンがクリックされたら、この関数を実行してね」という予約を入れている状態です。この「予約」こそが、JavaScriptを動的にする鍵となります。
実践！よく使うイベント5選
ここでは、実務で特によく使う5つのイベントについて、具体的なコード例と共に紹介します。
click：クリックされた時
最も基本的なイベントです。ボタン、リンク、タブの切り替えなどに使われます。
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
alert('クリックされました！');
});input：文字が入力されるたび
検索フォームのリアルタイム表示や、お問い合わせフォームの文字数カウントに使います。
const inputField = document.querySelector('#username');
inputField.addEventListener('input', (e) => {
console.log('現在入力中の文字：', e.target.value);
});submit：フォームが送信される時
「送信」ボタンが押された瞬間です。入力内容のチェック（バリデーション）を行い、不備があれば送信を止める、といった処理によく使われます。
mouseenter / mouseleave：マウスが乗った・離れた
画像のホバーエフェクトや、ドロップダウンメニューの表示などに使います。CSSの:hoverと似ていますが、JavaScriptを使うことでより複雑なアニメーションが可能になります。
scroll：画面がスクロールされた時
「トップへ戻る」ボタンを表示させたり、スクロールに合わせてふわっと要素を表示させたりするのに使います。
応用：複数の要素に一括でイベントを設定する
例えば、10個ある「削除ボタン」すべてにクリックイベントをつけたい場合、一つずつ書くのは大変です。そんな時はJavaScriptのfor文やforEachを使います。
const deleteButtons = document.querySelectorAll('.delete-btn');
deleteButtons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.remove(); // 親要素（リストなど）を消す
});
});このように、「要素の取得（一括）」→「ループ処理」→「addEventListener」という流れは、実務で頻出するパターンです。
イベントオブジェクト（e）の正体
addEventListenerの第2引数の関数には、実はこっそり「情報」が渡されています。それがイベントオブジェクトです。
btn.addEventListener('click', (event) => {
console.log(event); // どんなイベントが起きたかの詳細データが表示される
});何に使うの？
- どの要素がクリックされたか知りたい：event.target
- マウスの座標を知りたい：event.clientX、event.clientY
- どのキーが押されたか知りたい：event.key
- ブラウザの標準機能を止めたい：event.preventDefault()（リンクの移動やフォーム送信を止める）
この「イベントオブジェクト」を使いこなせるようになると、JavaScriptの中級者への道が見えてきます。
初心者がハマる！イベント操作の3つの落とし穴
addEventListenerを使う際に、よく起きる「バグ」の原因を解説します。
NG：HTMLの中にイベントを書く（インラインイベント）
HTMLタグの中に直接onclick=”…”と書く方法（古い書き方）は避けましょう。
<!-- 非推奨！ -->
<button onclick="myFunc()">クリック</button>HTMLは「構造」、JavaScriptは「振る舞い」と役割を分けることで、コードの管理がしやすくなります。
NG：関数のカッコ（）をつけてしまう
イベントを登録するときに、関数の後ろにカッコをつけてはいけません。
// NG：ページを開いた瞬間に実行されてしまう
btn.addEventListener('click', sayHello());
// OK：クリックされた時まで待ってくれる
btn.addEventListener('click', sayHello);NG：イベントの重複登録
ループ処理の中で誤って何度もaddEventListenerを実行すると、1回のクリックで処理が2回、3回と動いてしまうことがあります。イベントの追加は、原則として「1つの要素につき1回」を意識しましょう。
まとめ
JavaScriptのイベントをマスターすれば、ユーザーの操作に連動する「双方向の体験」を作れるようになります。
- イベントをブラウザ上で起きる「アクション（信号）」である。
- addEventListenerは、その信号を待ち構えて処理を動かす予約システム。
- 「要素の取得」→「イベントの種類指定」→「処理の中身」の3ステップが基本。
- イベントオブジェクトeを使うと、さらに高度な制御ができる。
- HTMLに直接書かず、JS側で一括管理するのが「綺麗なコード」の秘訣。
まずは自分のサイトなどのボタンに、一つだけaddEventListenerを設定してみてください。ボタンを押して、文字が変わる。その小さな成功体験が、あなたのプログラミングスキルを飛躍させる第一歩になります！
