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

by

The old/traditional way:

Capture this in a variable:

this.initialize = function(selector) {
    var that = this;
    $('span#banner1-nav').click(function(event) {
       that._onClickNavigation(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) {
    $('span#banner1-nav').click(this._onClickNavigation.bind(this));
}

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));

More Related Contents:

  1. Is it possible to simulate key press events programmatically?
  2. How can I get the scrollbar position with JavaScript?
  3. How to find out what character key is pressed?
  4. Document.write clears page
  5. Wait 5 seconds before executing next line
  6. How do I capture response of form.submit
  7. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  8. How to pass parameter to function using in addEventListener?
  9. How do you log all events fired by an element in jQuery?
  10. Javascript trick for ‘paste as plain text` in execCommand
  11. Are there any standards for mobile device web browsers in terms of thread sleeping? [closed]
  12. JavaScript mapping touch events to mouse events
  13. Using this inside an event handler
  14. Native JS equivalent to jQuery delegation
  15. Are event handlers in JavaScript called in order?
  16. HTML DOM: Which events do not bubble?
  17. Javascript onkeydown event fire only once?
  18. Why can’t I reliably capture a mouseout event?
  19. Can multiple event listeners/handlers be added to the same element using Javascript?
  20. onchange event not fire when the change come from another function
  21. How to check whether a Button is clicked by using JavaScript
  22. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  23. Detecting user inactivity over a browser – purely through javascript [duplicate]
  24. How do I listen for triple clicks in JavaScript?
  25. Fire oninput event with jQuery
  26. Handle refresh page event with JavaScript
  27. Is triggering event listeners using “.click()” asynchronous?
  28. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  29. What is the difference between Event.target, Event.toElement and Event.srcElement?
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment