传递迭代变量以单击循环内部的事件

Pass iteration variable to click events inside for loop

本文关键字：循环 内部 事件 单击 迭代 变量      更新时间：2023-09-26

我有以下代码：

var i = 0;
for (var anchor in window.globals.html.anchors) {
     var value = window.globals.html.anchors[anchor];
     value.addEventListener('click', function(i) {
          var currData = window.globals.data[i],
              data_clientId = 0;
          if (currData.client_product_id !== undefined) {
              data_clientId = currData.getAttribute('data_clientId');
          } else if (currData.product_id !== undefined) {
              data_clientId = currData.product_id;
          }
          Statistics.send(data_clientId);
          window.open(window.globals.data[i].url, '_blank');
     }(i));
     i++;
}

这意味着我想通过点击事件监听器内的interator访问全局数组。如果我不向点击事件传递i，我将在每次迭代中获得可能的最大数量，因为i将是一个全局变量。

但在这里，点击事件的所有迭代似乎都是在点击任何东西之前调用的，即onload。

为什么会这样，怎么了？

看起来您正在调用处理程序，同时试图将其添加到addEventListener中。您需要将其封装在一个函数中，从而创建一个封装i变量的闭包。

var i = 0;
for (var anchor in window.globals.html.anchors) {
   var value = window.globals.html.anchors[anchor];
   value.addEventListener('click', (function(i) {
     return function() {
        var currData = window.globals.data[i],
            data_clientId = 0;
        if (currData.client_product_id !== undefined) {
            data_clientId = currData.getAttribute('data_clientId');
        } else if (currData.product_id !== undefined) {
            data_clientId = currData.product_id;
        }
        Statistics.send(data_clientId);
        window.open(window.globals.data[i].url, '_blank');
     }
   }(i)));
   i++;
}

现在请注意，传递给addEventListener的函数会立即被调用，并返回一个函数本身，其中变量i的作用域是该函数。

相关文章：