我可以在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元素

回答

相关问题