私は、img要素のforループでaddEventListenerを使用できますか？

Question

私はaddEventListenerがIEにはやさしくないことを理解していますが、私はこのアプローチについて一般的に不思議です。

私はイベントリスナーが最初の要素に追加されているように見える私の関数以外のループ内のimgsで 'onload' addEventListenerを使用しようとしています。画像パスはPHPから来ていて、私は自分のHTMLからonloadを取り出そうとしています。

は、もともと私は、この（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; 
} 

スクリプティング