我可以在for循環中使用addEventListener與img元素

我明白，addEventListener不是IE友好的，但我很好奇這種方法一般。我可以在for循環中使用addEventListener與img元素

我想在一個循環中使用帶有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所有在一起（b/c的IE事情）。當我在循環中直接使用elem.onload時，我確實看到doIt開火。

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

謝謝！

來源

2012-03-12 kaplan

更改爲

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

你得到了事件類型錯誤。你的指的是attachEvent。有關事件類型的完整列表，請參閱here。

來源

2012-03-12 13:13:34 Sirko

太棒了！感謝您的鏈接！我在MDN上就是這樣的。 – kaplan 2012-03-12 13:31:00

該鏈接實際上列在MDN上， - ） – Sirko 2012-03-12 13:32:39

Dottoro確實對支持和HTML參考很好。這裏是我在MDN上發現的一個傾聽：https：//developer.mozilla.org/en/DOM/DOM_event_reference – kaplan 2012-03-12 14:29:43

我建議使用jQuery，它與幾乎所有的瀏覽器，而且很容易兼容寫什麼你正在嘗試做的：

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

然而，你的代碼似乎是正確的。

來源

2012-03-12 13:12:40 MatuDuke

如果你只安裝一個監聽器（這是絕大多數情況下），最簡單的方法是隻需將其添加到相應的屬性：

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

將在每一個瀏覽器，支持工作腳本。

來源

2012-03-12 13:28:01 RobG

啊，我明白了！這是有道理的，並避免了IE問題。我打算這麼做，謝謝！ – kaplan 2012-03-12 14:23:28

我可以在for循環中使用addEventListener與img元素

回答

相關問題