Динамически назначить событие в объекте JavaScript - PullRequest
Новая
       1

Динамически назначить событие в объекте JavaScript

0 голосов
/ 18 января 2011

У меня следующий класс 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) функция каждый раз, когда я нажимаю на изображение?

Большое спасибо!

Ответы [ 2 ]

2 голосов
/ 18 января 2011

Вам необходимо захватить текущее значение this (которое относится к объекту ImageGallery) и вызвать loadMainImage для него в пределах onclick. Внутри onclick, this относится к самому изображению, поэтому this.src даст вам источник изображения: 

var self = this;
img.onclick = function() {
  self.loadMainImage(this.src);
};
0 голосов
/ 18 января 2011

Я бы постарался избежать использования таких методов, как 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 = ...;, все немного проще, похоже, в этом случае браузер позаботится об этом.

...