我可以在带有img元素的for循环中使用addEventListener

Question

I understand that addEventListener isn't IE friendly, but I'm curious about this approach in general.

I'm trying to use an 'onload' addEventListener with imgs in a loop, other than my function not firing it looks like the event listener is only being added to the first element. The images paths are coming from some PHP and I'm trying to take the onload out of my HTML.

Originally I had it like this (excerpt of HTML from a PHP while):

<img 
onLoad="SLIDESHOW.crkarchProject.onImageLoad(<?php echo $rowSlideImage[1]; ?>)" 
id="<?php echo $rowSlideImage[1]; ?>" 
src="./slideshow_images/<?php echo $rowSlideImage[2]; ?>" 
alt="<?php echo $rowSlideImage[3]; ?>"/>

What I'd like to do is use addEventListener in my loop for each image. This is the code excerpt I'm working on now:

// get the images and how many
photos = slideshow.getElementsByTagName("img");
totalImageCount =  photos.length;
for (i = 0; i < totalImageCount; i += 1) {
    var elem = photos[i];
    elem.addEventListener('onload', doIt, false);
}

function doIt() {
    console.log("YO!");
}

Is my approach all wrong? Is that var elem a bad idea in the for loop? I've also tried:

// also tried this in the loop
photos[i].addEventListener('onload', doIt, false);

Should I just avoid addEventListener all together (b/c of the IE thing). I do see the doIt firing when I use elem.onload directly in the loop.

// this will fire the doIt!
elem.onload = doIt();

Thanks!

Answer 1

Change to

 elem.addEventListener('load', doIt, false);

You got the event type wrong. Yours refers to attachEvent . For a full list of event types have a look at here .

Answer 2

I recommend to use JQuery, it's compatible with almost all browsers, and very easy to write what you are trying to do:

$('img').load(function() {
  // Handler for .load() called.
  console.log("YO!");
});

However, your code seems to be right.

Answer 3

If you're only attaching one listener (which is the vast majority of cases), the simplest way is to just add it to the appropriate property:

var i = document.images.length;
while (i--) {
  document.images[i].onload = doIt;
}

which will work in every browser that supports scripting.