javascript - 在 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 对象)的当前值，并在 内调用 loadMainImage onclick。在 onclick 中，this 指的是图像本身，因此 this.src 将为您提供图像源:

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