遍历全局数组并将事件侦听器添加到文档

Question

我确定这是一个范围或迭代器关闭问题，但我无法使其正常工作。 如果这是一个非常明显的解决方法，请提前道歉。

这是GTM中的自定义HTML标记。 这个想法是监听WPCF7（WordPress联系表格7）表单提交事件，并将相应的事件推送到GTM dataLayer。

//Event listener array
var listeningEvents = [
    ["wpcf7mailsent","CF7formSubmitAndSent"],   //Mail sent successfully
    ["wpcf7submit","CF7formSubmit"],            //Form submitted
    ["wpcf7spam","CF7formSpam"],                //Form spam
    ["wpcf7invalid","CF7formInvalid"],          //Form invalid
    ["wpcf7mailfailed","CF7formMailFail"]       //Form fail
];

//Loop through event listener array & action
for( var i = 0; i < listeningEvents.length; i++){
    document.addEventListener( listeningEvents[i][0],
        (function(i, event, listeningEvents) {
            dataLayer.push({
                'event' : listeningEvents[i][1]
            });
        })() 
    );
}

我一直在dataLayer.push之前使用console.log进行调试。 addEventListener中的listeningEvents [i] [1]正在以未定义的形式出现。

我在这里尝试了一些建议： https : //www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem

但是我一直收到未定义的错误。

我真的不想将事件侦听器单独添加5次。 我真的很希望能够扩展事件侦听器列表以实现将来的可维护性。

[编辑]

我想我在这里找到了可行的解决方案： https : //arstechnica.com/civis/viewtopic.php?f=20&t=138763

var stuff = ['a', 'b', 'c'];

for(var i=0; i<stuff.length; i++)

{

  var closureMaker = function(line) {

    return function(event){ alert(line); };

  };

  var closure = closureMaker( stuff[i] );

  addEventListener('click', closure, false);

}

$ i不再是我的问题-它是从addEventListener内部访问全局数组。

Answer 1

我在您的代码中看到的唯一问题是“ i”是函数中的参数。

请勿直接在内部访问“ i”，而是将其作为函数参数传递，如下所示。

如果直接访问“ i”，由于关闭问题，您将获得“ i”的最后一个值。

for( var i = 0; i < listeningEvents.length; i++){
    document.addEventListener( listeningEvents[i][0],
      (function(i, event, listeningEvents) {
        dataLayer.push({
            'event' : listeningEvents[i][1]
        });
      })(i) 
    );
}

Answer 2

我想我在这里找到了可行的解决方案： https : //arstechnica.com/civis/viewtopic.php?f=20&t=138763

var stuff = ['a', 'b', 'c'];

for(var i=0; i<stuff.length; i++)

{

  var closureMaker = function(line) {

    return function(event){ alert(line); };

  };

  var closure = closureMaker( stuff[i] );

  addEventListener('click', closure, false);

}

$ i不再是我的问题-它是从addEventListener内部访问全局数组。