Javascript &引用；单击图像以显示其id"；及其陷阱

这个标题看起来很简单，但这并不是我想要问的。我只是想不出一个更好的标题，如果你有任何阅读后，请评论，我会更新标题。 使用jQuery，这很容易做到，因为

click（）

传递

this

参数

$('img').click(function(){console.log($(this).attr('id')})

我试图使用香草javascript来实现这一点，但遇到了一些陷阱

imgs = document.getElementsByTagName('img');
l = imgs.length;
for (i=0;i<l;i++) {
  imgs[i].addEventListener('click',function(){console.log(imgs[i].id)});
}

---

出于学习目的，我记得我读过一些javascript书籍，除了上面的方法，还有其他方法可以做到这一点，但我现在找不到。我的问题是，还有其他办法吗？哪一个是最佳实践？

这是一个经典的闭包问题，您可能无意中偶然解决了这个问题

此代码的问题是：

for (i=0;i<l;i++) {
    imgs[i].addEventListener('click',function(){console.log(imgs[i].id)});
}

通过创建闭包，您基本上意外地解决了这个问题，只是您使用的是命名函数而不是匿名函数，但结果是一样的。在运行时，for循环调用一个函数，该函数“捕获”闭包中

i

的值，而不是将其延迟到事件侦听器触发

---

第一个代码应该可以正常工作，只要您将

img[i]

替换为

此
内部单击事件以引用当前img：

imgs = document.getElementsByTagName('img');
l = imgs.length;

for (i=0;i<l;i++) {
    imgs[i].addEventListener('click',function(){console.log(imgs[i].id)});
}

imgs=document.getElementsByTagName（'img'）；
l=imgs.长度；
对于（i=0；i可能的副本）
for (i=0;i<l;i++) {
    (function(_i){
        imgs[_i].addEventListener('click',function(){console.log(imgs[_i].id)});
    })(i);
}

imgs = document.getElementsByTagName('img');
l = imgs.length;

for (i=0;i<l;i++) {
    imgs[i].addEventListener('click',function(){console.log(imgs[i].id)});
}