Calling function from an object with event listener

Question

I have a view model something like this:

CANVAS = getElementById...

RemixView = function(attrs) {
     this.model = attrs.model;
     this.dragging = false;
     this.init();
};

RemixView.prototype = {
    init: function() {
        CANVAS.addEventListener("click", this.handleClick);
    },
    handleClick: function(ev) {
        var obj = this.getHoveredObject(ev);
    },
    getHoveredObject: function(ev) {}
    ...
    ...
}
rv = new RemixView()

the problem is my when clickHandler event fired, this object is being equal to CANVAS object, not RemixView. So I get an error that says:

this.getHoveredObject is not a function

What is correct approach at that stuation?

mu is too short · Accepted Answer · 2018-04-30 18:10:40Z

4

The usual approach is to use a simple closure for the callback and capture the appropriate value of this in a local variable that the closure can reference:

RemixView.prototype = {
    init: function(this) {
        var _this = this;
        CANVAS.addEventListener("click", function(ev) {
            return _this.handleClick(ev);
        });
    },
    //...
};

You could also use Function.prototype.bind to make a bound function (as user123444555621 does):

RemixView.prototype = {
    init: function(this) {
        CANVAS.addEventListener("click", this.handleClick.bind(this));
    },
    //...
};

Or, if you want to use ES6, you could use an arrow function:

RemixView.prototype = {
    init: function(this) {
        CANVAS.addEventListener("click", ev => this.handleClick(ev));
    },
    //...
};

edited Apr 30, 2018 at 18:10

answered Jun 16, 2012 at 21:08

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

Comments

user123444555621 · Accepted Answer · 2012-06-16 21:18:16Z

1

You want to bind the handler function:

CANVAS.addEventListener("click", this.handleClick.bind(this));

Note that this may not work in older browsers, but there are polyfills for those.

answered Jun 16, 2012 at 21:18

user123444555621

154k27 gold badges118 silver badges126 bronze badges

2 Comments

Mirat Can Bayrak Over a year ago

problem is not about binding event, calling getHoveredObject method from handleClick method.

user123444555621 Over a year ago

My answer is not about binding event.

pete · Accepted Answer · 2012-06-16 21:21:27Z

0

Make prototype a function.

RemixView.prototype = function () {
    init: function() {
        CANVAS.addEventListener("click", this.handleClick);
    },
    handleClick: function(ev) {
        var obj = this.getHoveredObject(ev);
    } ///...
//...
}

answered Jun 16, 2012 at 21:21

pete

25.2k4 gold badges40 silver badges52 bronze badges

1 Comment

Mirat Can Bayrak Over a year ago

here you're defining prototype as function but behaving it like object. i think init: must be this.init = function() { ... } ?

Collectives™ on Stack Overflow

Calling function from an object with event listener

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related