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

Question

I want to add an event to every image in the document, this is the code:

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

I log all of the images and find that only the last image has the click event. I had tried converting images into an array and used forEach methods, which got the same result. What's up? By the way, I do that in Vue's mounted hook method.

Answer 1

Best way to attach events to multiple DOM elements is to use Event Delegation . You should attach the event to the parent element and check if the target element is img or not . Then you can access the src and alt attributes of the image.

 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>