Question

function Foo(elementId, buttonId) {
this.element = document.getElementById(elementId);
this.button = document.getElementById(buttonId);
this.bar = function() {dosomething};
this.button.addEventListener('click', function(e) {this.bar();}, false);
}

var myFoo = new Foo('someElement', 'someButton');

I’d like to add event listeners inside my constructor, but it doesn’t seem to work. Is this something that’s possible with the correct syntax? I always get hung up on the line:

this.button.addEventListener('click', function(e) {this.bar();}, false);

Answer 1

Your this value changes in the constructor. You can keep a reference in the selector, and use the reference.

function Foo(elementId, buttonId) {

    /*...*/

    var self = this;
    this.button.addEventListener('click', function(e) {self.bar();}, false);
}

---

Or a more modern solution that doesn’t require a variable would be to use Function.prototype.bind.

function Foo(elementId, buttonId) {

    /*...*/

    this.button.addEventListener('click', this.bar.bind(this), false);
}

The .bind method returns a new bar function with the this value bound to whatever you passed it. In this case, it is bound to the original this from the constructor.