jQuery.proxy()    **DEPRECATED** JQ Home  <<  Events  <<  jQuery.proxy()

• <<    .die()
• .live()     >>

Proxy a function.

Shorthand version $.proxy()

Description

The jQuery.proxy() method is used to return a new function with a particular context or set a context for a function.

• The jQuery.proxy() method is used to preserve a reference to the calling object when the value of the this special operator is changed.
• After using the jQuery.proxy() method the this special operator is changed to our context. This means that the DOM element that actually triggered the event can no longer be accessed using the this special operator. We can still access this triggering DOM element using the event.currentTarget property of the jQuery.event object.
• When jQuery attaches an event handler, a unique id is assigned to the handler function, therefore a handler can also be removed by specifying the function name in the handler argument. Handlers proxied by the jQuery.proxy() method or similar mechanisms will all have the same unique id. In this case passing proxied handlers to the .off() method may remove more handlers than required. Adding namespaces when attaching or removing event handlers gets around this issue and is a good practice to use anyway.

This method was deprecated in jQuery 3.3.

• Use the JavaScript Function.prototype.bind method instead.

Syntax

Parameters

Return

A Function object.

jQuery.proxy( function, context ) Example  Events  <<  Top

Return a new function with a particular context.

In the example below when we press the left button the click JavaScript event fires and we try to output this.msg from the aFunction.prototype.processClick = function() {} function. But this.msg will be undefined as the triggering event takes the scope of the this special operator.

When we press the right button, the click JavaScript event fires and passes across the current scope as our context to the bFunction.prototype.processClick = function() {} function. So when we access this.msg from the proxied function it is still in scope and an output message is rendered. We can still access this triggering DOM element using the event.currentTarget property of the jQuery.event object.

$(function(){
  aFunction = function() {
    this.$btn = $('#btn9');
    this.msg = 'A message to pass for testing from "btn9" click';
    this.$btn.click(this.processClick);
  };
  aFunction.prototype.processClick = function(event) {
    $('#scrollspan4').append(this.msg + ' Triggering element was: ' 
                                      + event.currentTarget + ' ** '); 
  };

  bFunction = function() {
    this.$btn = $('#btn10');
    this.msg = 'A message to pass for testing from "btn9" click';
    this.$btn.click($.proxy(this.processClick, this));
  };
  bFunction.prototype.processClick = function(event) {
    $('#scrollspan4').append(this.msg + ' Triggering element was: ' 
                                      + event.currentTarget + ' ** '); 
  };

  var aVar = new aFunction();
  var bVar = new bFunction();
});

We will show a message here for the mouse button presses.

jQuery.proxy( context, name ) Example  Events  <<  Top

Set a context for a function.

In the example below when we press the left button the click JavaScript event fires and we try to output this.msg from the cFunction.prototype.processClick = function() {} function. But this.msg will be undefined as the triggering event takes the scope of the this special operator.

When we press the right button, the click JavaScript event fires and passes across the current scope as our context and the string 'processClick' for our function name. The dFunction.prototype.processClick = function() {} function . So When we access this.msg from the proxied function it is still in scope and an output message is rendered. We can still access this triggering DOM element using the event.currentTarget property of the jQuery.event object.

$(function(){
  cFunction = function() {
    this.$btn = $('#btn11');
    this.msg = 'A message to pass for testing from "btn11" click';
    this.$btn.click(this.processClick);
  };
  cFunction.prototype.processClick = function(event) {
    $('#scrollspan5').append(this.msg + ' Triggering element was: ' 
                                      + event.currentTarget + ' ** '); 
  };

  dFunction = function() {
    this.$btn = $('#btn12');
    this.msg = 'A message to pass for testing from "btn12" click';
    this.$btn.click($.proxy(this.processClick, this));
  };
  dFunction.prototype.processClick = function(event) {
    $('#scrollspan5').append(this.msg + ' Triggering element was: ' 
                                      + event.currentTarget + ' ** '); 
  };

  var cVar = new cFunction();
  var dVar = new dFunction();
});

We will show a message here for the mouse button presses.

Related Tutorials

jQuery Advanced Tutorials - Lesson 1 - Event Handler Attachments

• <<    .die()
• .live()     >>