如何将其他参数传递到事件中

Question

我有一系列可点击的链接“ btns”

for ( var i=0; i<btns.length; i++ ) {      
        btns[i].addEventListener('click', eventData, false); 

eventData函数在这里：

function eventData(e) {
  dataLayer.push({
      'event': 'home_cta',
      'iteration': i, // HERE. I WANT TO ADD WHICH ELEMENT INDEX WITHIN THE FOR LOOP HERE
      'gtm.element': e.target,
      'gtm.elementClasses': e.target.className || '',
      'gtm.elementId': e.target.id || '',
      'gtm.elementTarget': e.target.target || '',
      'gtm.elementUrl': e.target.href || e.target.action || '',
      'gtm.originalEvent': e
    });

我有两个问题：

1. 如何在每次迭代中将任何东西传递给eventData？ 例如，如果var somevar = "bla" ，如何将其传递给我的for循环中的eventData？
2. 我想将迭代次数传递到eventData中。 我已经在'iteration'属性中对此进行了强调。 因此，我想在每次迭代中得到一个介于1和6之间的数字（因为变量“ btns”的长度为6）。 我该怎么做？

Answer 1

这将涉及IIFE（立即调用的函数表达式）：

for (var i = 0; i < btns.length; i++) {
    (function(somevar, i) {
        btns[i].addEventListener('click', function(e) {
            eventData(e, somevar, i);
        }, false);
    })(somevar, i);
}

addEventListener将一个参数和一个参数传递给其回调，因此您必须“手动”调用eventData函数。

（请注意，如果没有(function() { ... })() ，则每个事件侦听器都会将btns.length传递给它们，作为i的值。）

为了进一步解释IIFE，这是您的基本操作：

var f = function(somevar, i) {
    // ...
};
f(somevar, i);

也就是说，您正在创建一个函数并立即调用它（因此命名）。 同样，这样做是为了使i的值（如果它改变， somevar ）对于适当的迭代保持相同。

Answer 2

您还可以使用.bind()将绑定函数的第一个参数“固定”到当前索引。

for (var i=0; i<btns.length; i++ ) {
    btns[i].addEventListener('click',
               // <this> in the function will be the clicked button (as usual)
               // but the first passed parameter would be the current iteration step <i>
               eventData.bind(btns[i], i),
               false);
}


function eventData(iteration, e) {
    //...
    'iteration': iteration,
}

小提琴