在 javascript 对象中动态分配事件

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 对象），并在 onclickloadMainImage 。代码>.在 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 和 <代码>处理程序指定。 argument - 传递给该处理程序的内容，以及执行该处理程序的context（在您的情况下，它只是this

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