JavaScriptのイベントオブジェクト（`e`）ってなに？ボタン変数だけでよくないの？と思った初心者向け解説

はじめに

「JavaScript でボタンをクリックしたときに console.log(e) とか書かれているけど、e.target とか btn とか、結局同じじゃない？」と思ったことはありませんか？
実はこの イベントオブジェクト（e）は、初心者が「要素を取得してあるのになんでわざわざ e が必要？」と疑問に思いやすいポイントです。

この記事では、

単純な場合には btn だけでも問題ない
でも実際は イベントオブジェクト がいろんな場面で活躍する

ということを丁寧に解説します。

1. 最小限のサンプル：本当に `btn` と `e.target` は同じ？

まずは、こんな最小限のコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Event Practice</title>
</head>
<body>
  <button id="testBtn">クリックしてみて</button>

  <script>
    // ボタン要素を取得
    const btn = document.getElementById('testBtn');

    // ボタンにクリックイベントを付与
    btn.addEventListener('click', (e) => {
      console.log(e);         // イベントオブジェクトを出力
      console.log(e.target);  // クリックされた要素 (ここでは button)
      console.log(btn);       // 変数として事前に取得した要素 (同じく button)

      alert('コンソールを開いてみてね');
    });
  </script>
</body>
</html>

ブラウザで開いてボタンを押すと、

console.log(e) : MouseEvent というオブジェクトが出力される
console.log(e.target) : <button id="testBtn">…</button>
console.log(btn) : 同じ <button id="testBtn">…</button>

確かにこの例だけ見ると、e.target と btn は同じ要素 を指しているので、btn の方を直接使えば「それでいいじゃん！」と思うかもしれませんね。

2. それでもイベントオブジェクトが必要な理由

2-1. どの要素がクリックされたか分からないと困るケース

1つの要素（ボタン）が固定の場合は btn で十分です。でも、複数の要素を1つのイベントでまとめて扱いたい場合はどうでしょう？

例：イベントデリゲーション

const container = document.getElementById('container');

// containerにイベントを1つだけ登録
container.addEventListener('click', (e) => {
  // e.target は実際にクリックされた要素
  if (e.target.matches('.delete-button')) {
    // 複数あるボタンのどれがクリックされたか分かる
    console.log('削除ボタンが押されました', e.target);
  }
});

もし複数の .delete-button があるなら、1つ1つをconst btn = …で取得していたら手間だし動的に増減する場合は困ります。
e.target なら「ユーザーが本当にクリックした要素」を簡単に特定できます。

2-2. 座標やキー情報など追加データを使う場合

「どのキーが押されたか (e.key)」「どの座標をクリックしたか (e.clientX, e.clientY)」などの情報は、イベントオブジェクト に含まれています。
ただ btn という変数だけでは、そんな付加情報は得られません。

例：マウス座標ログ

document.addEventListener('mousemove', (e) => {
  console.log(`マウスの位置: x=${e.clientX}, y=${e.clientY}`);
});

例：キー入力

document.addEventListener('keydown', (e) => {
  console.log(`押されたキー: ${e.key}`);
});

3. 結局、簡単な場合は `btn` だけでOK？

はい、単一ボタンをクリックして何かするだけ なら、それでも大丈夫です。
しかし、ほとんどの実用的なUI では「どの子要素が押されたか判定」「マウス座標取得」「キー情報取得」などが必要になるため、最初から e（イベントオブジェクト）を受け取るパターンが広く使われているというわけです。

4. まとめ

「btn と e.target は同じ場合があるけど、使い道はまったく違う」
- 単純な1ボタンなら同じ要素を指すだけ
- しかし複数要素の判定や追加情報を扱う場面では e.target やイベントオブジェクトそのものが必要
「イベントオブジェクト e が持つ付加情報」
- クリック座標、押されたキー、イベントの種類 (e.type = "click", "keydown", etc...)
- 実際にクリックされた要素 (e.target) と、リスナーを持つ要素 (e.currentTarget) を区別できる
結論
- 「初心者向けサンプルで btn と e.target が重複して見えても」 → それは単に最小例なだけ。
- 実際には イベントオブジェクト を扱わないと実現できない場面が多いため、標準で (e) => ... と受け取る書き方が定着している。

実践してみよう

CodePenやローカルで簡単なHTML を用意し、クリックした要素やマウス座標を console.log(e) してみる。
複数ボタン を配置して、「削除ボタンを押したら何かする」みたいな仕組みを1つの親要素にリスナーを付けて試す → e.target.matches('.delete-button') を条件に分岐。
マウス移動イベント や キーイベント を利用して、e.clientX, e.key などを表示する。

こうすると、イベントオブジェクトの便利さがより体感できます。
ぜひコンソールに console.log(e) と書いて実際の構造を確認してみてください！

補足

e.target の他にも e.currentTarget, e.type, e.timeStamp など多くのプロパティがあり、複雑なUIでもイベントハンドリングを柔軟に行えます。
初心者がよく戸惑う「btn と e.target が同じじゃん」と思う気持ちは自然。でも本格的なアプリを作ると e が必須な状況が多いので、慣れておくと吉です。

以上が、「なぜイベントオブジェクト（e）が必要なのか？ btn だけでいいんじゃないの？」 という疑問への簡単な解説でした。

単純な1ボタン → btn でもOK
複数要素 or 追加情報が必要 → イベントオブジェクト e が大活躍

ぜひいろんなパターンで試してみてください。