Question

我想为文档中的每个图像添加一个事件，这是代码：

let images = document.getElementsByTagName("img")
const self = this;
for (var img of images) {
  img.onclick = function(e) {
      e.stopPropagation();
      if (!e.target.src) {
        return;
      }
      self.source = e.target.src;
      self.alt = e.target.alt;
  }
}

我记录了所有图片，发现只有最后一张图片有点击事件。我曾尝试将images转换为数组并使用forEach方法，这些方法得到了相同的结果。这是怎么回事？顺便说一句，我是在Vue的mounted钩子方法中做到的。

Answer 1

将事件附加到多个DOM元素的最佳方法是使用event。您应该将target附加到父元素，并检查img or not元素是否为src。然后，您可以访问图片的alt和var images = document.querySelector('.images'); images.onclick = function(e) { if(e.target.tagName === 'IMG') { console.log(e.target.src +" : " + e.target.alt); } }属性。

<div class="images">
  <img alt="1" src="https://randomuser.me/api/portraits/men/83.jpg" />
  <img alt="2" src="https://randomuser.me/api/portraits/med/men/83.jpg" />
  <img alt="3" src="https://randomuser.me/api/portraits/thumb/men/83.jpg" />
</div>

{{1}}

无法将事件绑定到数组循环中的每个项目

1 个答案: