在循环中添加“点击"事件侦听器 [英] 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);
    }
}

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