javascript - addEventListener 的闭包应该放在哪里？

Question

我读到可以在循环中使用 addEventListener 的闭包 ( addEventListener using for loop and passing values )。

但是，此方法不适用于更复杂的示例:

function f(fevent) {
  var a = document.createElement('a');
  a.innerHTML = 'Test';
  a.href = '#';
  a.addEventListener('click', fevent);
  return a;
};

for (l = 0; l < 2; l += 1) {
  for (h = 0; h < 2; h += 1) {
    document.body.appendChild(
    f(function() {alert(l+','+h);})
    );
  }
}

https://jsfiddle.net/yasnujzq/

编辑:我想要的是 anchor 上的点击事件来提醒不同的组合 (0,0)、(1,0)、(0,1) 和 (1,1) 。但它总是提醒 (2,2)。

这是我尝试使用上面的闭包方法进行的操作:

function f(fevent) {
  var a = document.createElement('a');
  a.innerHTML = 'Test';
  a.href = '#';
  a.addEventListener('click', fevent);
  return a;
};

for (l = 0; l < 2; l += 1) {
  for (h = 0; h < 2; h += 1) {
    (function() {
                document.body.appendChild(
                f(function() {alert(l+','+h);})
                );
    }());
  }

https://jsfiddle.net/72sg8d5n/

我还尝试向闭包添加参数:

function f(fevent) {
  var a = document.createElement('a');
  a.innerHTML = 'Test';
  a.href = '#';
  a.addEventListener('click', fevent);
  return a;
};

for (l = 0; l < 2; l += 1) {
  for (h = 0; h < 2; h += 1) {
    (function() {
                document.body.appendChild(
                f(function() {alert(l+','+h);})
                );
    }(l,h));
  }
}

https://jsfiddle.net/wxodr8p6/

也许有人可以启发我。

编辑:这是一个使用下面接受的解决方案中的方法的工作 fiddle :

https://jsfiddle.net/87zp4dkr/

Answer 1

(function() {
            document.body.appendChild(
            f(function() {alert(l+','+h);})
            );
}(l,h));

在此代码的最后一行，您向函数传递两个参数。

在第一行，您不接受任何参数。

您不使用传递给该函数的值，您仍在使用循环中的值(每次循环时都会更改)。

(function(my_l, my_h) {
            document.body.appendChild(
            f(function() {alert(my_l+','+my_h);})
            );
}(l,h));