Question

Being a long time C++/C# developer, I find myself moving a lot of of my JS code into “classes” to group functions and data together. As those classes handle event though, I’m finding myself having to write “stub” handlers that serve only to route the calls into a class method to provide the proper this context. So I’m doing things like this:

var Manager = {
    foo: 'x',
    bar: 1,

    onClickStub: function(evt) {
        // 'this' refers to HTMLElement event source
        Manager.onClick(evt);
    },

    onClick: function(evt) {
        // 'this' now refers to Manager.
        // real work goes here.
    }
}

Is this the normal way of doing things or is there a better way to structure my event handlers while keeping my class organization?

Answer 1

As Joseph Silber said in the comments above, I think bind would be perfect in this case. If you need to support older browsers, you can always add a shim to Function.prototype.bind (see an example implementation in the MDN docs). Then your code could just be:

var Manager = {
    var foo: 'x',
    var bar: 1,

    // no more stub!

    onClick: function(evt) {
        // 'this' will refer to Manager.
        // real work goes here.
    }
}

// And when you bind the event handler:
var el = document.getElementById('something');
el.addEventListener('click', Manager.onClick.bind(Manager));