以特定方式在图片数组上添加事件侦听器

mister_potato

我有一堆图像，这些图像应一个一个地分布在容器中，这意味着每个图像在加载并显示了前一个图像之后都显示准确，并且每个图像都应该有一个事件侦听器。
这是我的解决方案https://jsfiddle.net/e2sfzn1u/4/
我曾经Image.onload将图像节点添加到标记中并定义了该节点的事件侦听器，当这些节点准备就绪时，它将转到另一个图像（递归）。

var pics = [
   'http://i.imgur.com/1oT2ZpOb.jpg',
   'http://i.imgur.com/XsViuLib.jpg',
   'http://i.imgur.com/aTDTI8Eb.jpg',
   'http://i.imgur.com/4kLvWOdb.jpg'
]
var cont = document.getElementById('container');
var each = function(arr, i) {
   if (i === undefined) {
      i = 0;
   }
   if (i < arr.length) {
      var img = new Image();
      img.onload = function() {
         cont.innerHTML += '<div class="sas" id="' + i + '" ></div>';
         var pic = document.getElementById(i);
         pic.appendChild(img);
         pic.addEventListener('click', function() {
            alert('mda')
         });
         each(arr, i + 1);
      };
      img.src = arr[i];
   }
};
each(pics);

看起来很简单，但是有一个问题-事件侦听器仅为最后一个元素定义。

mister_potato

终于我来到了解决方案
问题在这里

cont.innerHTML += '<div class="sas" id="' + i + '" ></div>';

我试图以某种方式使其像@RoryMcCrossan建议的那样-我以正确的方式创建了div元素

//cont.innerHTML += '<div id="' + i + '"></div>';
var div = cont.appendChild(document.createElement('div'))
div.setAttribute('id', i);
div.setAttribute('class','sas');
var pic = document.getElementById(i);
pic.appendChild(img)
div.addEventListener('click', function () {
   alert('mda')
});

我唯一的解释是Element.innerHTML的速度比按节点添加元素的速度慢得多，因此我想为所有人类提供大量建议-永远不要使用硬编码innerHTML来操作DOM。谢谢

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。