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

Question

我确定这是一个作用域或迭代器闭包问题，但我无法让它工作。如果这是一个非常明显的修复，请提前致歉。

这是 GTM 中的自定义 HTML 标签。这个想法是监听 WPCF7（WordPress Contact Form 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 内部访问我的全局数组。

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

Looping through a global array and adding event listener to document

javascript

iterator

loops

contact-form-7

google-tag-manager