使用变量在循环中调用addEventListener

问题描述

我是JavaScript新手。我有6个元素，我想配备非常相似的事件监听器。我有一个工作强力解决方案，我想改进，但（我认为）我有Java Script闭包问题。

I am new to JavaScript. I have a 6 elements that I want to equip with very similar event listeners. I have a working brute force solution that I want to improve, but (I think) I have trouble with Java Script closures.

工作代码：

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

当我找到并理解为什么它无法正常工作。然后我提出了以下代码，这些代码也不起作用，但现在我现在更长时间理解为什么它不起作用。有人可以向我解释并帮我创建工作代码吗？

I a simple loop that did not work, when I found https://stackoverflow.com/a/2520602/2536029 and understand why it could not work. Then I came up with the following code, that does not work either, but now I now longer understand why it does not work. Can someone explain it to me and help me create working code?

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：问题是，事件在调用期间未定义

PS: the problem is, that event is undefined during the invocation of

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

推荐答案

您需要将事件监听器机制置于闭包内， laymen闭包从内部函数返回值，你希望你的事件监听器应该在循环执行或范围完成后出现。

You need to put event listener mechanism inside closure, in laymen closure return value from inner function, you want your event listener should be present even after loop is executed or scope is finished.

你需要在整个事件中包装整个事件或 getElementByid ，这里是代码片段

You need to wrap whole event or getElementByid inside closure, here is code snippet

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

获取可以传递此事件的事件，这是指 addEventListner

for getting event you can pass this, this refer to event inside addEventListner

这是jsFiddle代码

Here is jsFiddle code http://jsfiddle.net/Xtgr4/

希望以上答案对你有意义

Hope above answer make sense to you

这篇关于使用变量在循环中调用addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！