Javascript 使用变量在循环中调用addEventListener

我是JavaScript新手。我有6个元素，我想配备非常类似的事件侦听器。我有一个可行的蛮力解决方案，我想要改进，但是（我认为）我在Java脚本闭包方面遇到了问题

工作代码：

  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) { ...

当我发现并理解了为什么它不能工作时，我发现一个简单的循环不起作用。然后我想到了下面的代码，它也不起作用，但现在我不再理解为什么它不起作用了。有人能给我解释一下并帮我创建工作代码吗

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
  );
}

---

您需要将事件监听器机制放在闭包中，在外行闭包中，从内部函数返回值，您希望即使在执行循环或完成作用域之后，事件监听器也应该存在

您需要将整个事件或

getElementByid

包装在闭包中，下面是代码片段

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

---

for（var id=1；id）您能否将示例代码添加到JS Fiddle中，以便人们可以帮助您更简单？通过一个示例更简单。@KyleMuir:请参阅yashprits的讨论，该JS Fiddle的答案传递到实际的MouseeEvent。如果您将答案编辑为包含该内容，我可以接受它。
  for (var id = 1; id <= 2; id++) {
     (function(id){
       elem = document.getElementById("court" + id + "button");
       elem.addEventListener(
        "click",
        function(event){wassern(id, event);},
        false
      );
      elem = document.getElementById("court" + id + "xbutton");
      elem.addEventListener(
        "click",
        function(event){abbrechen(id, event);},
        false
      );
    })(id)
  }