javascript - 変数を使用してループ内で addEventListener を呼び出す

Question

私はJavaScriptが初めてです。非常によく似たイベントリスナーを装備したい6つの要素があります。改善したいブルート フォース ソリューションが機能していますが、JavaScript クロージャーに問題があります。

作業コード:

  elem = document.getElementById("court1button");
  elem.addEventListener("click", wassern_id1, false);
  elem = document.getElementById("court1xbutton");
  elem.addEventListener("click", abbrechen_id1, false);

  elem = document.getElementById("court2button");
  elem.addEventListener("click", wassern_id2, false);
  elem = document.getElementById("court2xbutton");
  elem.addEventListener("click", abbrechen_id2, false);

  ... 4 more times ...

  function wassern_id1(event) {
    wassern(1, event)
  }
  function wassern_id2(event) {
    wassern(2, event)
  }

  ... 4 more times ...

  function abbrechen_id1(event) {
    abbrechen(1, event)
  }
  function abbrechen_id2(event) {
    abbrechen(2, event)
  }

  ... 4 more times ...

  function wassern(id, event) { ...
  function abbrechen(id, event) { ...

https://stackoverflow.com/a/2520602/2536029を見つけて、なぜそれが機能しなかったのかを理解したとき、私は機能しなかった単純なループです。次に、次のコードを思いつきましたが、どちらも機能しませんが、なぜ機能しないのかがわかりました。誰かが私に説明して、動作するコードを作成するのを手伝ってくれますか?

for (var id = 1; id <= 6; id++) {
  elem = document.getElementById("court" + id + "button");
  elem.addEventListener(
    "click",
    function(id2, event2){ 
      wassern(id2, event2); 
    }(id, event),
    false
  );
  elem = document.getElementById("court" + id + "xbutton");
  elem.addEventListener(
    "click",
    function(id2, event2){ 
      abbrechen(id2, event2); 
    }(id, event),
    false
  );
}

PS：問題は、event呼び出し中に未定義であることです

function wassern(id, event) { ... event.stopPropagation();