Dynamically assign event in javascript object

Question

I have following javascript class:

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;
    }
}

next, in code I create an object of that class:

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

How can I assign img.onclick event to launch loadMainImage(imgPath) function every time I click on the image?

Thanks a lot!

Your declaration of loadMainImage is invalid. You probably want this.loadMainImage = function(imgPath) { ... }. — Brian Donovan
– Brian Donovan, Commented Jan 18, 2011 at 17:32
What would the imgPath parameter be when the image is clicked? — casablanca
– casablanca, Commented Jan 18, 2011 at 17:34
Not really related to your question, but JavaScript standards suggest beginning your variable names with lowercase letters. — Samo
– Samo, Commented Jan 18, 2011 at 17:51

casablanca · Accepted Answer · 2011-01-18 17:45:38Z

2

You need to capture the current value of this (which refers to the ImageGallery object) and invoke loadMainImage on it within onclick. Inside onclick, this refers to the image itself, so this.src will give you the image source:

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

answered Jan 18, 2011 at 17:45

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maxym Over a year ago

this code can possibly leak... JavaScript function points to img as DOM element, which points to JavaScript "self" variable in its onclick handler... Can't tell for sure, just looks like circular reference and worth to test for leaks

Maxym · Accepted Answer · 2011-01-18 18:29:10Z

I would try to avoid using methods like onevent (in your case onclick), because it is easy to loose this handler (just writing img.onclick somewhere else will override previous handler)

try to use some javascript library (like jQuery), it will simplify your development at least a bit. And back to your question, using YUI 2 I would write so:

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);
}

You can find similar function in jQuery or other frameworks. What it does:
YAHOO.util.Event.addListener(obj, event, handler, argument, context) - attach event listener to obj, for event and handler specified. argument - what to pass to that handler, and context to execute that handler (in your case it will be just this)

Doing this just don't forget to unattach this handler when you unload your page (or whatever you do), e.g. YAHOO.util.Event.removeListener(img, "click", this.loadMainImage), or calling function which removes all listener attached (like YUI's purgeElement). Yes, things are a bit easier when you use img.onclick = ...;, seems like in this case browser will take care about it.

Collectives™ on Stack Overflow

Dynamically assign event in javascript object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related