在循环中添加“click”事件侦听器 [英] adding 'click' event listeners in loop

问题描述

在html标签中重构标准 onClick 到侦听器，遇到我的代码遇到问题：

Refactoring standard onClick within html tag to listeners ,faced problem with my code:

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 仅在此循环中的最后一个元素填充。 >
循环初始化看起来正确。

为什么会这样？

When td element is clicked on,it's assumed that clicked td with last index from loop,e.g. 7
Looks like ,eventListeners been populated for last element in this loop only.
Loop initialization looks correct.
Why so happened?

这里是活代码

推荐答案

您需要将事件侦听器闭包，类似：

You need to wrap the assignment of the event listener in a closure, something like:

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);
    }
}

这篇关于在循环中添加“click”事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！