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;
}

可以在每个支持脚本的浏览器中使用。

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

3 个答案: