用于循环和传递值的addEventListener

Question

用于循环和传递值的addEventListener

我试图使用for循环将事件侦听器添加到多个对象，但最终导致所有侦听器以同一个对象->最后一个对象为目标。

如果我通过为每个实例定义Boxa和boxB来手动添加侦听器，它就能工作。我想是加载项事件循环没有按我所希望的方式工作。也许我使用了错误的方法。

示例在容器4上使用4类=“容器”触发器的工作方式。在容器4上的容器1，2，3触发器事件上触发，但仅当触发器已被激活时。

// Function to run on click:function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";}// Autoloading function to add the listeners:var elem = document.getElementsByClassName("triggerClass");for (var i = 0; i < elem.length; i += 2) {
  var k = i + 1;
  var boxa = elem[i].parentNode.id;
  var boxb = elem[k].parentNode.id;

  elem[i].addEventListener("click", function() {
    makeItHappen(boxa, boxb);
  }, false);
  elem[k].addEventListener("click", function() {
    makeItHappen(boxb, boxa);
  }, false);}

<div class="container">
  <div class="one" id="box1">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box2">
    <p class="triggerClass">some text</p>
  </div></div><div class="container">
  <div class="one" id="box3">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box4">
    <p class="triggerClass">some text</p>
  </div></div>

Answer 1

您面临的范围/闭包问题是function(){makeItHappen(boxa,boxb);} 博萨和箱B然后，引用总是最后一个元素。为解决这一问题：function makeItHappenDelegate(a, b) {   return function(){       makeItHappen(a, b)   }}// ...  elem[i].addEventListener("click", makeItHappenDelegate(boxa,boxb), false);