javascript - call addEventListener in loop with variable - Stack Overflow

admin管理员组

文章数量:1332638

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 JavaScript closures.

Working code:

  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 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: the problem is, that event is undefined during the invocation of

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

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 JavaScript closures.

Working code:

  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./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: the problem is, that event is undefined during the invocation of

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

• javascript
• dom-events
• addeventlistener

Share Improve this question Follow edited Aug 29, 2021 at 13:40 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 8, 2013 at 9:06 mnagelmnagel 6,85444 gold badges3434 silver badges6969 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.

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

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

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

Hope above answer make sense to you

本文标签： javascriptcall addEventListener in loop with variableStack Overflow