javascript - 如何使用 ES5 为每个图像添加事件

Question

我正在为文档中的每个图像添加事件监听器。

for (var i = 0; i < document.images.length; i++) {
    let img = document.images[i];
    img.addEventListener('click', function (event) { 
        var data = {uri: img.src}; 
    });
}

但我不能使用 es6，所以 let 让我出问题了。如果我用 var 而不是 let 只有最后一张图片有事件。

如何使用es5给每张图片添加事件？

Answer 1

您可以使用 var 和 this 这样做:

for (var i = 0; i < document.images.length; i++) {
  document.images[i].addEventListener('click', function(event) {
    var data = {
      uri: this.src
    };
  });
}

for (var i = 0; i < document.images.length; i++) {
  document.images[i].addEventListener('click', function(event) {
    var data = {
      uri: this.src
    };
    console.log(data)
  });
}

<img src="http://www.placehold.it/100x100">
<img src="http://www.placehold.it/100x200">
<img src="http://www.placehold.it/100x300">