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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

以下是使用常规旧ES5创建元素并向每个元素添加事件侦听器的示例。

function createClickableElements() {
  var arr = [];
  for (var i = 0; i < 5; i++) {
    var div = document.createElement('div');
    div.innerHTML = 'Click Here!';
    arr.push(div);
  }
  return arr;
}

var elems = createClickableElements();

var createClickHandler = function(arg) {
  return function() {
    console.log(arg);
  };
}

for (var i = 0; i < elems.length; i++) {
  elems[i].onclick = createClickHandler(i);
  document.getElementById('container').appendChild(elems[i]);
}

<div id='container'></div>

Answer 3

与其他示例不同，不需要为每个图像创建闭包，也不需要为每个图像指定新的匿名函数。 ES5已经提供Array.from和Array.prototype.forEach。利用它支持编写更好的可读代码，只使用两个函数 - 一个用于分配点击处理程序，另一个用于处理任何图像的数据创建，因此也提供了更少内存消耗的方法......

function createImageData(evt) {
  var data = { uri: evt.target.src };
  console.log('createImageData - data : ', data);
}
function assignClickHandler(elmImage) {
  elmImage.addEventListener('click', createImageData, false);
  console.log('assignClickHandler - elmImage : ', elmImage);
}
Array.from(document.images).forEach(assignClickHandler);

.as-console-wrapper { top: 0; }

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

......甚至可以考虑使用event delegation

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

3 个答案: