では「クロージャの応用例：イベントリスナー」を、わかりやすく 2段階 で説明します。

✅ 段階1：普通のイベントリスナー（クロージャなし）

【コード例】ファイル名: event-listener-step1.js

//ボタン要素を取得（HTMLに <button id="myButton">押して！</button> があるとする）
const button = document.getElementById("myButton");

//イベントリスナーを登録（クリックされたら "クリックされた！" と表示）
button.addEventListener("click", function() {
  console.log("クリックされた！");
});

🟢 【解説】

• addEventListener の第2引数に「関数」を渡している。
• この関数は「クリックされたときに実行される」。
• ここでは特に 変数を覚えている必要がない。

🧩 【たとえ】

「誰が押しても、ただ『押されました』とだけ言うボタン」

→ 個別の情報は持っていない。

✅ 段階2：クロージャを使ったイベントリスナー（変数を覚えている）

【コード例】ファイル名: event-listener-step2.js

//ボタン要素を取得（HTMLに <button id="myButton">押して！</button> があるとする）
const button = document.getElementById("myButton");

//クリック回数をカウントする関数（クロージャを作る）
function createClickCounter() {
  //count変数を0で初期化（この変数を覚えておく）
  let count = 0;

  //クロージャ（countを覚えている関数）を返す
  return function() {
    //クリックされるたびにcountを1増やす
    count++;
    console.log("クリックされた回数: " + count);
  };
}

//counterFunctionに、カウントする関数を代入
const counterFunction = createClickCounter();

//イベントリスナーを登録（counterFunctionがクロージャ）
button.addEventListener("click", counterFunction);