在循环中添加“点击”事件侦听器[重复]

Question

将html标签内的标准onClick重构到监听器，我的代码面临问题：

var td;
    for (var t=1;t<8;t++){
        td = document.getElementById('td'+t);
        if (typeof window.addEventListener==='function'){
                td.addEventListener('click',function(){
                    console.log(td);
            })}
 }  

当td 元素被点击时，假设点击了td 与循环中的最后一个索引，例如7
看起来，eventListeners 仅填充了此循环中的最后一个元素。
循环初始化看起来正确。
为什么会这样？

这里是live code

Answer 1

据我了解，这是因为关闭...您在 FOR 语句的范围内分配事件处理程序。当点击发生时，如果 TD 变量在 FOR 范围内，它将获取最后一个版本并将其写入日志。

Answer 2

您需要将事件侦听器的分配包装在一个闭包中，例如：

var td;
for (var t = 1; t < 8; t++){
    td = document.getElementById('td'+t);
    if (typeof window.addEventListener === 'function'){
        (function (_td) {
            td.addEventListener('click', function(){
                console.log(_td);
            });
        })(td);
    }
}

Answer 3

以下应按预期工作：

  for (var t=1;t<8;t++){
        var td;
        td = document.getElementById('td'+t);
        if (typeof window.addEventListener==='function'){
                td.addEventListener('click',function(){
                    console.log(this);
            })}
 } 

Answer 4

所以这里发生的事情是您将变量“td”保留在事件侦听器函数的范围内。只有 1 个“td”实例，每次 for 循环迭代时都会更新。因此，当 for 循环完成时，td 的值现在设置为元素 '#td7'，而您的事件处理程序只是记录 td 的当前值。

在上面的示例中，您可以简单地记录“this”：

var td;
for (var t=1;t<8;t++){
    td = document.getElementById('td'+t);
    if (typeof window.addEventListener==='function'){
      td.addEventListener('click',function(){
        console.log(this);
      });
    }
}

因为 'this' 被设置为事件绑定的元素以执行事件处理程序。

我猜您正在寻找更多关于在 for 循环中创建闭包时保持迭代器的答案。为此，您需要在 for 循环之外定义一个函数。

for (var t=1;t<8;t++){
  bind_event(t);
}

function bind_event(t) {
    var td = document.getElementById('td'+t);
    if (typeof window.addEventListener==='function'){
      td.addEventListener('click',function(){
        console.log(td);
      });
    }
}

这样，每次运行 bind_event 时都会创建一个名为“td”的变量的实例，并且该实例将保持在事件侦听器函数的闭包中。值得注意的是，bind_event 中的 't' 也是一个新变量。

Answer 5

发生了什么

变量td 是在事件处理程序之外定义的，因此当您单击一个单元格时，您将记录它设置为的最后一个值。

从技术上讲：每个事件处理函数都是一个闭包——一个从外部范围引用变量的函数。

一般解决方案

此类问题的一般解决方案是从包装函数返回事件处理程序，将要“修复”的变量作为参数传递：

td.addEventListener('click', function(wrapTD) {
    return function() { console.log(wrapTD); }
}(td));

参数现在绑定到调用的包装函数的范围。

更简单的解决方案：使用this

不过，还有一个更简单的选项。在事件处理程序中，this 设置为定义处理程序的元素，因此您可以只使用this 而不是td：

td.addEventListener('click', function() {
    console.log(this);
});

更简单：没有循环！

最后，您可以完全摆脱for 循环，并在整个表上设置一个事件处理程序：

var table = document.getElementById('my-table');

table.addEventListener('click', function(e) {
    if (e.target.nodeName.toUpperCase() !== "TD") return;

    var td = e.target;
    console.log(td);
});

对于较大的表来说，这是一个更好的解决方案，因为您只需用一个来替换多个事件处理程序。请注意，如果您将文本包装在另一个元素中，则需要对其进行调整以检查目标元素是否是 td 的后代。