Accessing class member variables inside an event handler in Javascript

Question

I have a quick question regarding the proper way to access Javascript class member variables from inside of an event handler that class uses. For example:

function Map() {
    this.x = 0;
    this.y = 0;

    $("body").mousemove( function(event) {
        this.x = event.pageX;     // Is not able to access Map's member variable "x"
        this.y = event.pageY;     // Is not able to access Map's member variable "y"
    });
}

Rather than changing the member variable of the "Map" class, the "this.x" in the event handler tries to affect the "x" member variable of the element that triggered the event. What is the proper way to access the member variables of the "Map" class from within the event handlers?

Any help would be greatly appreciated - I've been sort of scratching my head at this one.

Cheers, Charlie

Matt · Accepted Answer · 2010-06-19 15:25:30Z

53

Since this changes in an event context (points to global usually), you need to store a reference to yourself outside of the event:

function Map() {
    this.x = 0;
    this.y = 0;
    var _self = this;
    $("body").mousemove( function(event) {
        _self.x = event.pageX;     // Is now able to access Map's member variable "x"
        _self.y = event.pageY;     // Is now able to access Map's member variable "y"
    });
}

answered Jun 19, 2010 at 15:25

Matt

44.1k6 gold badges105 silver badges103 bronze badges

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

2 Comments

Christian C. Salvadó Over a year ago

The this value on event handlers usually points to the DOM element where the handler is bound, in this case this === document.body.

zeptonaut Over a year ago

Thank you very much for the quick response! This works like a charm, and is very clean too. Thanks!

user113716 · Accepted Answer · 2010-06-19 15:43:37Z

14

The solution that Matt gave it probably the way to go.

Just thought I'd point out that you can pass data via the event object like this:

function Map() {
    this.x = 0;
    this.y = 0;

// Pass object with data-------------v
    $("body").bind('mousemove', {ths: this}, function(event) {
            // access this via event.data
        event.data.ths.x = event.pageX;
        event.data.ths.y = event.pageY;     
    });
}

This is just for the info. It is really not a practical application. Matt's reference to a local variable makes more sense.

answered Jun 19, 2010 at 15:43

user113716

323k64 gold badges454 silver badges441 bronze badges

2 Comments

zeptonaut Over a year ago

I didn't know that you could do that - it's interesting, though. You're right, it's not a very practical application right here, but it may just come in handy in the future. Thanks for the tip!

alearg Over a year ago

I found myself in a situation where this was the only way out - thanks!

Jay Haase · Accepted Answer · 2013-08-31 23:49:34Z

0

You can also use JQuery.proxy, to create a proxy function with its context. You can than bind the proxy to events.

Here is an example:

var init_handler  =  $.proxy(this.init, this);
$('#page_id').bind('pageinit', init_handler);

answered Aug 31, 2013 at 23:49

Jay Haase

1,9891 gold badge17 silver badges36 bronze badges

Collectives™ on Stack Overflow

Accessing class member variables inside an event handler in Javascript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related