JavaScript 图像 onload 事件绑定

Question

我有这段代码，它循环遍历一个数组并加载图片，并在图片加载完成后进行通知。

for (var i = 0; i < arr.length; i++) {                
    var imageObj = new Image();
    imageObj.src = url[i];
    imageObj.onload= (function(i){
                return function(){
                    console.log(i, 'loaded');
                }
            })(i);

}

它能正常工作。但是如果我尝试这样做，它就不能工作：

imageObj.addEventListener('onload', function(
    console.log(i, 'loaded');
}, false);

问题是什么？有没有办法在这种情况下避免使用闭包？

- Ethan

---

不仅仅是这个问题，而且你的第二个错误示例明显是JS代码有误，在第一行末尾缺少i) {。 - Lambart

为了保险起见，你不应该先分配事件再分配src吗？ - bashan

Answer 1

问题的一个方面是：事件不是被称为onload，而是load。

imageObj.addEventListener('load', function() { /* ... */ }, false);

除此之外，由于i在事件监听函数外部发生了改变，因此需要闭包。

- Anders Marzi Tornblad

---

@gillesc 一个普通的 ES5 数组.forEach() 会给你一个新的作用域，所以你的绑定并不总是设置在最后一个项目上。这将比遍历索引并添加自己的闭包少些代码。 - mikemaccana