Javascript - how to access object attribute in an event function?

Question

I am a newbie programmer. I want to create my script in OO way. However I can't think of how to protect my properties and still be able to access it. The problem is that I cant access my this.XXX properties in the function

this.handleStartEvent=function(event)

The error message in Firebug:

"TypeError: this.imgContainer is undefined"

The whole script is below:

var imageViewer=function(imageWrapper)
{
    var hasTouch = 'ontouchstart' in window,
    resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize',
    startEvent = hasTouch ? 'touchstart' : 'mousedown',
    moveEvent = hasTouch ? 'touchmove' : 'mousemove',
    endEvent = hasTouch ? 'touchend' : 'mouseup',
    cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';

    this.imgContainer=imageWrapper;
    this.image=imageWrapper.getElementsByTagName("img")[0];
    this.initScale=1;
    this.scaleLevel=this.initScale;
    this.startPoint={x:0,y:0}

    //alert(this.image)
    this.initEvents=function()
    {
        window.addEventListener(resizeEvent, this.resizeImageViewer, false);
        this.imgContainer.addEventListener(startEvent, this.handleStartEvent, false);
        this.imgContainer.addEventListener(moveEvent, this.handleMoveEvent, false);
        this.imgContainer.addEventListener(endEvent, this.handleEndEvent, false);
    }

    this.resizeImageViewer=function(event)
    {
        /*not finish*/
    }

    this.handleStartEvent=function(event)
    {
        /**********problem goes here*************/
        this.startPoint.x = event.offsetX || (event.pageX - this.imgContainer.offsetLeft); 
        this.startPoint.y = event.offsetY || (event.pageY - this.imgContainer.offsetTop);
    }

    this.handleMoveEvent=function(event)
    {
        /*not finish*/
    }

    this.handleEndEvent=function()
    {
        /*not finish*/
    }

    this.initEvents();
}

var imageViewerObj = new imageViewer(document.getElementById("imageWrapper"));

I know that this will be the imgContainer, not the imageViewer, but I don't know how to get my imageViewer's properties like startPoint and initScale. Could someone guide me a little?

bniwredyc · Accepted Answer · 2012-08-08 11:17:24Z

1

If you want to keep reference to this just save it in other variable:

var imageViewer = function(imageWrapper)
{
    var self = this; // use "self" instead of "this" later

    ...

    self.startPoint={x:0,y:0}

    self.initEvents=function()
    {
        window.addEventListener(resizeEvent, self.resizeImageViewer, false);
        self.imgContainer.addEventListener(startEvent, self.handleStartEvent, false);
        self.imgContainer.addEventListener(moveEvent, self.handleMoveEvent, false);
        self.imgContainer.addEventListener(endEvent, self.handleEndEvent, false);
    }

    ...

    self.initEvents();
}

answered Aug 8, 2012 at 11:17

bniwredyc

8,8591 gold badge43 silver badges52 bronze badges

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

Comments

Burak Tamtürk · Accepted Answer · 2012-08-08 11:13:59Z

0

If imgContainer is the parent then you can use this.parent.getAttribute(...); if its a child this.parent.getChildAt( index ).getAttribute(...);

Replace index with the number (index) of the element you want to select. If its first child like <div><div class="wannaselectthat"></div></div> set index to zero.

answered Aug 8, 2012 at 11:13

Burak Tamtürk

1,2398 silver badges19 bronze badges

2 Comments

Chris So Over a year ago

I am sorry that I make some misunderstanding on the word "attribute".I want to get imageViewer's object variables like startPoint, initScale in the this.handleStartEvent function. Thank for answering.

Burak Tamtürk Over a year ago

this.parent.getChildAt( index ).attr would work fine. like this.parent.getChildAt( index ).id

Collectives™ on Stack Overflow

Javascript - how to access object attribute in an event function?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related