在循环内添加eventListener并创建一个依赖于循环的侦听器函数，但在循环完成后仍可使用

Question

Code as follows:

var classToAdd = 'myClass';

var addClass = function(el, cn) {
  if (el.classList.contains(cn)) {
    return;
  } else {
    el.classList.add(cn);
  }
};

var bundles = [
  {
    selectedActivators: [`array containing 2 DOM objects`],
    target: `DOM object`
  },
  {
    selectedActivators: [`array containing 2 DOM objects`],
    target: `DOM object`
  },
  {
    selectedActivators: [`array containing 2 DOM objects`],
    target: `DOM object`
  }
];

for (var k=0; k<bundles.length; k++) {
  for (var l=0; l<bundles[k].selectedActivators.length; l++) {
    console.log(bundles[k].selectedActivators[l]); // log #1
    console.log(bundles[k].target); // log #2
    bundles[k].selectedActivators[l].addEventListener('mouseover', function() {
      console.log(bundles[k]); // log #3
      addClass(bundles[k].target, classToAdd);
    });
    bundles[k].selectedActivators[l].addEventListener('mouseout', function() {
      removeClass(bundles[k].target, classToAdd);
    });
  } 
}

Logs #1 and #2 work exactly as expected so the objects are fine before they go into the event listener, but log #3 prints: undefined .

I understand that bundles[k] is not defined anymore when I go to the page and hover over the eventListener target because the loop has already finished, but how do I solve this? That target depends on the same loop

Answer 1

The for loop is messing up the Closure because it passes the same variable ( k ) to all the addClass calls. So when a addClass is invoked, it's look for the up-to-date value of k (which will be equal to the length of the array .length thus undefined index). That happens because the Scope of for remains the same until it is exited. So instead use forEach which surrounds each element by a different scope (scope of the callback) thus solving your problem. Like this:

bundles.forEach(function(bundlesK) {
  bundlesK.selectedActivators.forEach(function(selActiv) {
    selActiv.addEventListener('mouseover', function() {
      addClass(bundlesK.target, classToAdd);
    });
    selActiv.addEventListener('mouseout', function() {
      removeClass(bundlesK.target, classToAdd);
    });
  });
});