jQuery.proxy() Method

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

Definition

What Is `$.proxy()`?

jQuery.proxy(function, context) returns a new function that always runs with this set to context (since 1.4). Extra arguments for partial application arrived in 1.6.

Remember

var me = { type: "zombie", test: function () { return this.type; } };

// Without proxy — this is the button
$("#btn").on("click", me.test);

// With proxy — this is me
$("#btn").on("click", $.proxy(me.test, me));

// Modern replacement
$("#btn").on("click", me.test.bind(me));

Need	Use
Lock `this` (modern)	`fn.bind(context)`
Lock `this` (legacy jQuery)	`$.proxy(fn, context)`
Bind / unbind events	`.on()` / `.off()`
One-time handler	`.one()`
Fire a handler manually	`.trigger()`

Approach

How to Use `$.proxy()`

Wrap a method before passing it to .on() so this stays your object.

Identify the method that needs a fixed this.
Call $.proxy(fn, context) or $.proxy(context, "methodName").
Pass the returned function to .on() / .one().
Optional: add extra args after context for partial application (1.6+).
Unbind with a namespace when the same function is proxied in multiple ways.

Signature	Since	Role
`$.proxy(fn, context)`	1.4	Bind a function to a context
`$.proxy(context, name)`	1.4	Bind `context[name]` to `context`
`$.proxy(fn, context, …args)`	1.6	Also prepend extra arguments
`$.proxy(context, name, …args)`	1.6	Name form + partial application

Pseudocode

proxy = $.proxy(FN, CONTEXT [, EXTRA…])

when proxy is called with CALL_ARGS:
    set this = CONTEXT
    (if CONTEXT was null/undefined since 1.9: keep caller's this)
    invoke FN(EXTRA…, CALL_ARGS…)

attach:
    $("#el").on("click", proxy)

modern:
    $("#el").on("click", FN.bind(CONTEXT [, EXTRA…]))

Reference

Cheat Sheet

Keep these facts handy while fixing this bugs.

Topic	Detail
Returns	Function (bound wrapper)
Since	1.4 · extra args 1.6 · null context 1.9
Deprecated	3.3 → use `Function.prototype.bind`
Without proxy	`this` in a handler = the DOM element
With proxy	`this` = your context object
Unbind tip	Prefer event namespaces over matching proxy refs
Element still available	Use `event.target` / `event.currentTarget`

Try it

Live Preview

Compare a raw method vs $.proxy() vs .bind() on the same button.

Run an action to rebind, then click the test button.

Result

Ready — pick a bind style and click Test.

Code

jQuery Examples

Short, copy-ready snippets. Prefer Function.prototype.bind in new projects.

Example 1 — Function + Context

Lock this to your object when the handler runs.

jQuery

var me = {
  type: "zombie",
  test: function (event) {
    $("#out").text("Hello " + this.type);
    // element is still available:
    // event.target
  }
};

$("#test").on("click", $.proxy(me.test, me));

Try It Yourself

How It Works

Method. me.test expects this to be me.
Proxy. $.proxy(me.test, me) returns a wrapped function.
Click. jQuery calls the wrapper; this stays me.
Element. Read the button from event.target if needed.

Example 2 — Context + Method Name

Pass the object and the method name as a string.

jQuery

var obj = {
  name: "John",
  test: function () {
    $("#out").text(this.name);
  }
};

$("#test").on("click", $.proxy(obj, "test"));

Try It Yourself

How It Works

Lookup. jQuery reads obj["test"].
Bind. That function is locked to obj as this.
Click. Handler prints obj.name.
Same idea. Equivalent to $.proxy(obj.test, obj).

Example 3 — Extra Arguments

Prepend values; the event object still arrives last.

jQuery

var me = {
  type: "dog",
  test: function (one, two, event) {
    $("#out").text(
      one.type + " / " + this.type + " / " + two.type + " / " + event.type
    );
  }
};
var you = { type: "cat" };
var they = { type: "fish" };

$("#test").on("click", $.proxy(me.test, me, you, they));

Try It Yourself

How It Works

Extras. you and they are bound as the first two args.
Context. this is still me ("dog").
Event. jQuery appends the event object after the extras.
Order. Handler signature is (one, two, event).

Example 4 — With vs Without Proxy

Same method, two binds — see how this differs.

jQuery

var you = {
  type: "person",
  test: function () {
    $("#out").append(String(this.type) + " ");
  }
};

$("#raw").on("click", you.test);                 // this → button
$("#proxied").on("click", $.proxy(you.test, you)); // this → you

Try It Yourself

How It Works

Raw. Detaching you.test loses the object as this.
DOM. jQuery sets this to the element that received the event.
Proxy. Wrapper restores you as this.
Lesson. Always proxy (or bind) object methods used as handlers.

Example 5 — Migrate to `.bind()`

Same behavior with the native API preferred since jQuery 3.3.

jQuery

var me = {
  type: "zombie",
  test: function () {
    $("#out").text(this.type);
  }
};

// Legacy
$("#a").on("click", $.proxy(me.test, me));

// Preferred
$("#b").on("click", me.test.bind(me));

Try It Yourself

How It Works

Same goal. Keep this as me inside test.
Proxy. jQuery helper wraps the function.
Bind. Native ES5 does the same job without jQuery.
Prefer. Use .bind() in new code; keep $.proxy only in legacy paths.

Edge Cases & Pitfalls

Watch for these when locking this for handlers.

unbind

Shared proxy identity

Proxies of the same function can share jQuery’s handler id — use unique event namespaces when unbinding.

element

`this` is no longer the element

After proxying, read the DOM node from event.target or event.currentTarget.

args

Extra args come first

Bound extras prepend; the event is not always the first parameter anymore.

deprecated

Prefer `.bind()` for new code

Since jQuery 3.3, native bind is the recommended replacement.

Compatibility

Browser Support

jQuery.proxy() has been available since jQuery 1.4 and is deprecated since 3.3 (still present). Prefer Function.prototype.bind in modern browsers.

✓ Deprecated · jQuery 1.4+

jQuery.proxy()

Works wherever your loaded jQuery version includes it. New code should use Function.prototype.bind instead.

Legacy Use .bind() instead

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

$.proxy() Deprecated

Bottom line: Fine for reading legacy jQuery apps. Migrate new handlers to fn.bind(context).

Analysis

Performance Notes

Approach	Cost	Best for
`$.proxy()` / `.bind()` once	Tiny	Create the wrapper when binding, reuse it
New proxy on every render	Wasteful	Cache the bound function if you rebind often
Arrow functions	Tiny	Lexical `this` without proxy/bind (modern JS)

Creating a bound function is cheap. Avoid rebuilding proxies inside tight loops or on every mousemove.

Remember

Key Takeaways

Role: return a function with a fixed this context.
Status: deprecated since 3.3 — prefer fn.bind(context).
Events: proxy object methods before passing them to .on().
Unbind: use namespaces when the same function is proxied in multiple ways.

One line: $.proxy() locks this for callbacks — learn it for legacy code, write new code with .bind().

Frequently Asked Questions

What does jQuery.proxy() do?

jQuery.proxy(function, context) returns a new function that always runs with this set to context, no matter where it is called. That fixes event handlers where this would otherwise be the DOM element.

Is jQuery.proxy() deprecated?

Yes. As of jQuery 3.3, prefer native Function.prototype.bind(). $.proxy() still works in jQuery 3.x for legacy code, but new projects should use fn.bind(context).

How is $.proxy() different from Function.prototype.bind()?

Both lock this. $.proxy(fn, ctx) is jQuery’s version (since 1.4). It also accepts $.proxy(context, "methodName"). Native bind is the modern standard and needs no jQuery.

Why use it with event handlers?

Passing obj.handle to .on("click", obj.handle) makes this the clicked element inside handle. $.proxy(obj.handle, obj) keeps this as obj so you can read properties and call other methods.

How do I unbind a proxied handler safely?

jQuery can often .off() using the original function, but proxied copies of the same function share tracking. Prefer unique namespaces: .on("click.myWidget", $.proxy(fn, ctx)) then .off("click.myWidget").

Can $.proxy() pre-fill arguments?

Yes, since 1.6: $.proxy(fn, ctx, arg1, arg2). Those args come first; later call-time args (like the event) follow. Since 1.9, a null/undefined context keeps the caller’s this for partial application only.

Next: .on()

Attach modern event handlers — with or without a fixed this.

.on() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery .die() Method jQuery .on() Method

jQuery.proxy() Method

What Is $.proxy()?

How to Use $.proxy()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Function + Context

How It Works

Example 2 — Context + Method Name

How It Works

Example 3 — Extra Arguments

How It Works

Example 4 — With vs Without Proxy

How It Works

Example 5 — Migrate to .bind()

How It Works

Edge Cases & Pitfalls

Shared proxy identity

this is no longer the element

Extra args come first

Prefer .bind() for new code

Browser Support

jQuery.proxy()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.on()

.off()

.one()

.trigger()

.die()

Event Handler hub

Next: .on()

About the author

What Is `$.proxy()`?

How to Use `$.proxy()`

Example 5 — Migrate to `.bind()`

`this` is no longer the element

Prefer `.bind()` for new code