Javascript get reference to parent object/class from event handler

Question

I have a class (or function-containing object; I've heard that there is no such thing as a Javascript class) called Foo, with an event handler that is attached to a click event. When the event handler is called, I want to modify a property of my class Foo. Normally, I would use the this keyword, but in the event handler, the this reference is set to the reference to the html element. Here is my code:

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        this.num++;// This doesn't work.
        // Normally, "this" would refer to my instance of Foo,
        // but as an event handler, "this" refers to the html element.
    }
}

So my question is: how do I get a reference to my instance of Foo into my event handler so that I can modify its properties (like num)?

Fabrizio Calderan · Accepted Answer · 2012-05-18 16:12:07Z

17

function Foo() {
    var _self = this;
    this.num=0;

    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        _self.num++;
    }
}

use a reference _self = this defined in the outer scope

answered May 18, 2012 at 16:12

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

1 Comment

Chris Ellingsworth Over a year ago

Couldn't this solution cause a memory leak if the object ever needs to be released?

ThiefMaster · Accepted Answer · 2012-05-18 16:15:54Z

15

You need to bind the function's context; otherwise this will be the global object:

$('element').click($.proxy(this.eventHandler, this));

In a modern browser you can also use Function.prototype.bind:

$('element').click(this.eventHandler.bind(this))

answered May 18, 2012 at 16:15

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

1 Comment

Josh Werts Over a year ago

This should really the accepted answer. It's more robust since closure is not always an option.

Swapnil Bhamat · Accepted Answer · 2015-02-16 11:09:42Z

2

function Foo() {
   this.num=0;
   $(document).on('click', 'element', this, this.eventHandler);
   this.eventHandler=function(e) {
      var _this = e.data; 
      _this.num++;
   }
}

1) Use JQuery on() method to attach event listeners. 2) Use a reference _this for accessing parent class.

answered Feb 16, 2015 at 11:09

Swapnil Bhamat

211 bronze badge

Comments

alex · Accepted Answer · 2012-05-18 16:12:15Z

1

You can store a reference to this in the constructor that you can access in your event handler.

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    var that = this;
    this.eventHandler=function() {
        that.num++;// This doesn't work.
    }
}

answered May 18, 2012 at 16:12

alex

492k205 gold badges890 silver badges992 bronze badges

Collectives™ on Stack Overflow

Javascript get reference to parent object/class from event handler

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related