Could not bind event to each item in array loop

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.

The code is totally fine.

Jonas Wilms
– Jonas Wilms

2017-10-12 08:56:47 +00:00
Commented Oct 12, 2017 at 8:56 — Jonas Wilms
– Jonas Wilms, Commented Oct 12, 2017 at 8:56
It seems like all images have click events.

Agney
– Agney

2017-10-12 08:56:49 +00:00
Commented Oct 12, 2017 at 8:56 — Agney
– Agney, Commented Oct 12, 2017 at 8:56
What is this here const self = this;?

adiga
– adiga

2017-10-12 08:57:49 +00:00
Commented Oct 12, 2017 at 8:57 — adiga
– adiga, Commented Oct 12, 2017 at 8:57

Anurag Singh Bisht · Accepted Answer · 2017-10-12 09:04:26Z

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>

answered Oct 12, 2017 at 9:04

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JJWesterkamp Over a year ago

This is indeed the best way. I think it's worth noting that for matching non-empty HTML elements one should traverse the anchestor node tree of e.target until a match is found.

xiaojie Luo Over a year ago

Yeah it is. But for my project using Event delegation here will be a bit sticky.

Collectives™ on Stack Overflow

Could not bind event to each item in array loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related