动态设置事件和关闭

Question

这是我之前one 的后续问题： 我有这个对象：

var myObject {
 init: function(){

        for (var i = 0; i <3; i++) {
            image = new Image();
.
.
.
            image.onmouseover = this.Fade(this, 70, 100,1);
            image.onmouseout = this.Fade(this, 100, 70,0);
         }
    },

SetOpacity: function (eID, opacity){                   
       eID.style.opacity = opacity / 100; 
       eID.style.filter = 'alpha(opacity=' + opacity + ')'; 
    } ,
    fade: function (eID, startOpacity, endOpacity){            
        var timer = 0; 
        if (startOpacity < endOpacity) {  
          for (var i = startOpacity; i <= endOpacity; i++) { 
             (function(opacity) { 
                setTimeout(function() {SetOpacity(eID, opacity);}, timer * 30); 
             })(i); 
             timer++; 
           }     
        }            
    } 
}

我需要为事件定义闭包吗？

Answer 1

是的。

否则，image 变量将由所有三组鼠标处理程序共享，并且所有动画都将发生在最后一个图像上（即使您将鼠标悬停在不同的图像上）。

另外，在你的setTimeout 回调中，你应该写MySlideshow.setOpacity。

编辑：您的代码 (image.onmouseover = this.Fade(this, 70, 100,1)) 调用 Fade 方法并将它返回的函数分配给 onmouseover 属性。由于Fade 方法不返回函数，所以它不起作用。

您需要将其更改为image.onmouseover = function() { MySlideShow.Fade(this, 70, 100, 1); };。
除非您将其放在单独的函数中，否则这也不会按预期工作。