【6日でできるJavaScript入門】イベントリスナー

　Webページ上で「ボタンをクリック」「画像にマウスを重ねる」「入力欄が変わる」など、さまざまなユーザーの操作（イベント）をきっかけに動作を実現したいときに使うのがイベントリスナーです。

　従来のHTML属性（onclickなど）による方法よりも、HTMLとJavaScriptを完全に分離できるのがイベントリスナーの特長です。
これにより、大規模開発・メンテナンス・再利用性が大きく向上します。

用語概要
イベントクリックや入力など、ユーザーの操作のこと
リスナーイベントを「監視」し、発生時に処理を実行する機能
addEventListenerイベントリスナーを登録するためのメソッド

１．イベントリスナーの基本

1.1. addEventListenerの書式と使い方

イベントリスナーの基本書式は次の通りです。

書式例意味
要素.addEventListener('イベント', 関数名)指定した要素にイベントが発生したとき関数を実行
  • 「イベント」には 'click' や 'mouseover' などのキーワードを使います。
  • 関数名には()を付けずに記述します（例：showMessage）。

主なイベントキーワード

イベント内容
clickクリックしたとき
dblclickダブルクリックしたとき
mouseoverマウスが乗ったとき
mouseoutマウスが外れたとき
changeフォーム内容が変更されたとき
submitフォーム送信時

1.2. サンプル：ボタンで背景色を変える

ファイル名： lesson22-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎯 イベントリスナー入門</title>
  <style>
    #area { width: 360px; height: 80px;
            margin: 20px; padding: 20px;
            background: #f5f7fa; border-radius: 10px;
            font-size: 20px; transition: background 0.4s;
          }
    button { margin: 6px; }
  </style>
</head>
<body>
  <h1>🎯 イベントリスナー入門</h1>
  <button id="btnRed">赤色</button>
  <button id="btnBlue">青色</button>
  <button id="btnReset">リセット</button>
  <div id="area">ここが色付きエリアです</div>
  <script>
    const area = document.getElementById('area');
    document.getElementById('btnRed').addEventListener('click', function() {
      area.style.background = '#ffaaaa';
      area.textContent = '赤色に変わりました';
    });
    document.getElementById('btnBlue').addEventListener('click', function() {
      area.style.background = '#aaccff';
      area.textContent = '青色に変わりました';
    });
    document.getElementById('btnReset').addEventListener('click', function() {
      area.style.background = '#f5f7fa';
      area.textContent = 'ここが色付きエリアです';
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例

  • 「赤色」ボタンでエリアが赤色・メッセージが「赤色に変わりました」
  • 「青色」ボタンで青色、「リセット」ボタンで元に戻る

２．応用：ループ・無名関数・引数渡し

2.1. 画像ギャラリーでイベントリスナーを一括登録

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

js-event-listenersダウンロード
pic01.pngpic02.pngpic03.png

ファイル名： lesson22-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📸 ギャラリーイベントリスナー</title>
  <style>
    #main_img { width: 300px; height: 200px; display:
                block; margin-bottom: 12px;
                border: 2px solid #bbb;
              }

    #thumbs img { width: 100px; border: 2px solid #ccc;
                  margin: 3px; cursor: pointer; opacity: 0.7;
                }
    
    #thumbs img:hover { opacity: 1.0;
                        border-color: #3399ff;
                      }
  </style>
</head>
<body>
  <h1>📸 ギャラリーイベントリスナー</h1>
  <img id="main_img" src="pic01.png" alt="大きな写真">
  <div id="thumbs">
    <img src="pic01.png" alt="写真1">
    <img src="pic02.png" alt="写真2">
    <img src="pic03.png" alt="写真3">
  </div>
  <script>
    const thumbs = document.querySelectorAll('#thumbs img');
    for (let i = 0; i < thumbs.length; i++) {
      thumbs[i].addEventListener('click', function() {
        document.getElementById('main_img').setAttribute('src', this.getAttribute('src'));
      });
      thumbs[i].addEventListener('mouseover', function() {
        this.style.opacity = 1.0;
        this.style.border = '2px solid #ffbb33';
      });
      thumbs[i].addEventListener('mouseout', function() {
        this.style.opacity = 0.7;
        this.style.border = '2px solid #ccc';
      });
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例

  • サムネイル画像をクリックでメイン画像が切り替わる
  • マウスを乗せると枠色・透明度が変わる

2.2. 無名関数（アロー関数）と引数渡し

　addEventListenerの第二引数には 無名関数（function() { ... }）もしくはアロー関数（() => { ... }）も使えるため、任意の処理や引数渡しが可能です。

構文例意味
btn.addEventListener('click', () => func(値));イベント発生時、引数付き関数を実行できる。
el.addEventListener('click', function() { ... })その場限りの処理を柔軟に記述できる。

３．イベントリスナーのその他の特長

特長解説
複数のリスナー追加可能同じ要素・同じイベントに何度でも登録できる。
削除も可能removeEventListener() で解除できる。
HTMLと完全分離JavaScriptだけでイベント処理を管理できる。
再利用性・可読性向上コードがスッキリし保守しやすい。

まとめ

  • イベントリスナーは、ユーザー操作（クリック、マウス動作、入力等）に柔軟に反応できる
  • addEventListener()でイベントと関数を関連付ける
  • HTMLとJavaScriptを分離し、保守性や再利用性を高められる
  • 無名関数やループで大量要素にも一括対応できる

イベントリスナーを活用して、動きのあるインタラクティブなWebページを目指しましょう！