How do I pass the this context into an event handler?

The old/traditional way:

Capture this in a variable:

this.initialize = function(selector) {
    var that = this;
    $('span#banner1-nav').click(function(event) {

You could also assign this to a variable e.g. instance:

function ScrollBanner() {
    var instance = this;
    // ...

and refer to instance instead of this in all the calls.

The overall idea is to store this in a variable in a higher scope.

The ECMAScript5 way:

ECMAScript5 introduces a new property of functions: .bind(). MDC’s documentation shows an implementation for browsers that don’t support it. With it you can bind a certain context to a function:

this.initialize = function(selector) {

but behind the scenes it is doing the same thing. The advantage is that you make use of built-in functionality in browser that support is.

Note that this is different from apply or call. Both of these set the context and execute the function, whereas bind only sets the context without executing the function.

The jQuery way:

jQuery provides a method $.proxy() that is doing the same:

$('span#banner1-nav').click($.proxy(this._onClickNavigation, this));

Leave a Comment