Question

我有以下javascript类：

var ImageGallery = function(arr) {
    var ImgArr = arr;
    var MainImgId = "";

    this.build = function() {
        var div = document.createElement("div");
        for (var i = 0; i < ImgArr.length; i++) {
            var img = document.createElement("img");
            img.scr = ImgArr[i];
            // what to do next, how to assign loadMainImage function ?????
            img.onclick = 
            div.appendChild(img); 

        }
    }

    this.loadMainImage = function(imgPath) {
        document.getElementById(MainImgId).src = imgPath;
    }
}

接下来，在代码中我创建了该类的对象：

var gallery = new ImageGallery(someArrWithPaths);
gallery.MainImgId = 'idOfMainImg';
gallery.build();

每次单击图像时，如何指定img.onclick事件来启动loadMainImage（imgPath）函数？

非常感谢！

Answer 1

您需要捕获this的当前值（引用ImageGallery对象）并在loadMainImage内调用onclick。在onclick内，this指的是图片本身，因此this.src会为您提供图片来源：

var self = this;
img.onclick = function() {
  self.loadMainImage(this.src);
};

Answer 2

我会尽量避免使用像onevent这样的方法（在你的情况下是onclick），因为很容易丢失这个处理程序（只是在其他地方编写img.onclick会覆盖以前的处理程序）

尝试使用一些javascript库（比如jQuery），它将至少简化你的开发。回到你的问题，使用YUI 2我会这样写：

var imgCount = ImgArr.length; // do not use ImgArr.length in for definition, it is better 
// to save it once and then use... otherwise each time in loop will look up ImgArr object to find length property
for (var i = 0; i < imgCount; i++) {
     var img = document.createElement("img");
     var src = ImgArr[i];
     img.scr = src ;
     YAHOO.util.Event.addListener(img, "click", this.loadMainImage, src, this);
}

您可以在jQuery或其他框架中找到类似的功能。它的作用：
YAHOO.util.Event.addListener(obj, event, handler, argument, context) - 将事件监听器附加到obj，指定event和handler。 argument - 传递给该处理程序的内容，context执行该处理程序（在您的情况下，它将只是this）

执行此操作时，请不要忘记在卸载页面时（或您执行的任何操作）取消附加此处理程序，例如YAHOO.util.Event.removeListener(img, "click", this.loadMainImage)，或调用删除所有附加侦听器的函数（如YUI的purgeElement）。是的，当您使用img.onclick = ...;时，事情会更容易一些，在这种情况下，浏览器似乎会关注它。

在javascript对象中动态分配事件

2 个答案: