for 루프에서 img 요소가있는 addEventListener를 사용할 수 있습니까?

Question

addEventListener는 IE와 친숙하지 않지만 일반적으로이 방법에 대해 궁금합니다.

imgs와 함께 루프에서 'onload'addEventListener를 사용하려고합니다. 이벤트 리스너가 첫 번째 요소에만 추가되는 것처럼 보이지 않는 내 함수가 아닌 것입니다. 이미지 경로는 일부 PHP에서오고 있으며 HTML을 통해로드를 가져 오려고합니다.

원래 나는이 (동안 PHP에서 HTML의 발췌)처럼했다 :

<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]; ?>"/> 

내가 뭘하려는 것은 각 이미지에 대한 내 루프 또는 addEventListener를 사용합니다. 이것은 지금 제가 작업하고있는 코드 발췌입니다 :

// 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!"); 
} 

내 접근 방식이 잘못 되었습니까? 그 var elem은 for 루프에서 나쁜 생각입니까? 나는 또한 시도했다 :

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

나는 단지 함께 addEventListener를 피한다 (IE의 것의 b/c)? 루프에서 elem.onload를 직접 사용할 때 doIt이 실행되는 것을 볼 수 있습니다.

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

고마워요!

Answer 1

변경

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

에 당신은 잘못된 이벤트 유형을 얻었다. 너의는 attachEvent을 말합니다. 이벤트 유형의 전체 목록을 보시려면 here을보십시오.

Answer 2

나는 당신이 무엇을하려고 쓰는 거의 모든 브라우저 및 매우 쉽게와 호환, JQuery와 사용하는 것이 좋습니다 :

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

그러나, 코드가 잘 될 것 같다.

Answer 3

당신은 단지 하나 개의 수신기를 (대부분의 경우 인), 가장 간단한 방법은 단지 해당 속성에 추가하는 것입니다 부착하는 경우 :

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

이 지원하는 모든 브라우저에서 작동합니다 스크립팅.