{"id":430,"date":"2023-08-25T17:22:38","date_gmt":"2023-08-25T17:22:38","guid":{"rendered":"\/\/api.jquery.com\/?p=430"},"modified":"2026-01-20T17:34:58","modified_gmt":"2026-01-20T17:34:58","slug":"jQuery.proxy","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/jQuery.proxy\/","title":{"rendered":"jQuery.proxy()"},"content":{"rendered":"<article id=\"jQuery-proxy1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">jQuery.proxy( function, context )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a><\/span><span class=\"version-details\">version deprecated: <a href=\"\/category\/version\/3.3\/\">3.3<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Takes a function and returns a new one that will always have a particular context.<\/p>\n<ul class=\"signatures\">\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.4\/\">1.4<\/a><\/span><a id=\"jQuery-proxy-function-context\" href=\"#jQuery-proxy-function-context\"><span class=\"icon-link\"><\/span>jQuery.proxy( function, context )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-proxy-function-context-function\">\n<div><strong>function<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>The function whose context will be changed.<\/div>\n<\/li>\n<li id=\"jQuery-proxy-function-context-context\">\n<div><strong>context<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>The object to which the context (<code>this<\/code>) of the function should be set.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.4\/\">1.4<\/a><\/span><a id=\"jQuery-proxy-context-name\" href=\"#jQuery-proxy-context-name\"><span class=\"icon-link\"><\/span>jQuery.proxy( context, name )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-proxy-context-name-context\">\n<div><strong>context<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>The object to which the context of the function should be set.<\/div>\n<\/li>\n<li id=\"jQuery-proxy-context-name-name\">\n<div><strong>name<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the function whose context will be changed (should be a property of the <code>context<\/code> object).<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.6\/\">1.6<\/a><\/span><a id=\"jQuery-proxy-function-context-additionalArguments\" href=\"#jQuery-proxy-function-context-additionalArguments\"><span class=\"icon-link\"><\/span>jQuery.proxy( function, context [, additionalArguments ] )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-proxy-function-context-additionalArguments-function\">\n<div><strong>function<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>The function whose context will be changed.<\/div>\n<\/li>\n<li id=\"jQuery-proxy-function-context-additionalArguments-context\">\n<div><strong>context<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>The object to which the context (<code>this<\/code>) of the function should be set.<\/div>\n<\/li>\n<li id=\"jQuery-proxy-function-context-additionalArguments-additionalArguments\">\n<div><strong>additionalArguments<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Anything\">Anything<\/a>\n<\/div>\n<div>Any number of arguments to be passed to the function referenced in the <code>function<\/code> argument.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.6\/\">1.6<\/a><\/span><a id=\"jQuery-proxy-context-name-additionalArguments\" href=\"#jQuery-proxy-context-name-additionalArguments\"><span class=\"icon-link\"><\/span>jQuery.proxy( context, name [, additionalArguments ] )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-proxy-context-name-additionalArguments-context\">\n<div><strong>context<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>The object to which the context of the function should be set.<\/div>\n<\/li>\n<li id=\"jQuery-proxy-context-name-additionalArguments-name\">\n<div><strong>name<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the function whose context will be changed (should be a property of the <code>context<\/code> object).<\/div>\n<\/li>\n<li id=\"jQuery-proxy-context-name-additionalArguments-additionalArguments\">\n<div><strong>additionalArguments<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Anything\">Anything<\/a>\n<\/div>\n<div>Any number of arguments to be passed to the function named in the <code>name<\/code> argument.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <div class=\"warning\">\n      <p>Note: This API has been deprecated in jQuery 3.3; please use the native <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_objects\/Function\/bind\"><code>Function.prototype.bind<\/code><\/a> method instead.<\/p>\n    <\/div>\n    <p>This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from <code>jQuery.proxy()<\/code> it will still unbind the correct function if passed the original.<\/p>\n    <p>Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by <code>jQuery.proxy()<\/code> is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., <code>\"click.myproxy1\"<\/code>) rather than specifying the proxied function during unbinding.<\/p>\n    <p><strong>As of jQuery 1.6<\/strong>, any number of additional arguments may be supplied to <code>$.proxy()<\/code>, and they will be passed to the function whose context will be changed.<\/p>\n    <p><strong>As of jQuery 1.9<\/strong>, when the <code>context<\/code> is <code>null<\/code> or <code>undefined<\/code> the proxied function will be called with the same <code>this<\/code> object as the proxy was called with. This allows <code>$.proxy()<\/code> to be used to partially apply the arguments of a function without changing the context.<\/p>\n  <\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<h3>\n\t\t\t\tExample 1<\/h3>\n<p>Change the context of functions bound to a click handler using the \"function, context\" signature. Unbind the first handler after first click.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery.proxy demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"test\"<\/span>&gt;<\/span>Test<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"log\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> me = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"zombie\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Without proxy, `this` would refer to the event target<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ use event.target to reference that element.<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> element = event.target;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( element ).css( <span class=\"hljs-string\">\"background-color\"<\/span>, <span class=\"hljs-string\">\"red\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ With proxy, `this` refers to the me object encapsulating<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ this function.<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#log\"<\/span> ).append( <span class=\"hljs-string\">\"Hello \"<\/span> + <span class=\"hljs-built_in\">this<\/span>.type + <span class=\"hljs-string\">\"&lt;br&gt;\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#test\"<\/span> ).off( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-built_in\">this<\/span>.test );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> you = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"person\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#log\"<\/span> ).append( <span class=\"hljs-built_in\">this<\/span>.type + <span class=\"hljs-string\">\" \"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Execute you.test() in the context of the `you` object<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ no matter where it is called<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ i.e. the `this` keyword will refer to `you`<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> youClick = $.proxy( you.test, you );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ attach click handlers to #test<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#test\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ this === \"zombie\"; handler unbound after first click<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, $.proxy( me.test, me ) )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ this === \"person\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, youClick )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ this === \"zombie\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, $.proxy( you.test, me ) )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ this === \"&lt;button&gt; element\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, you.test );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1\">\n<h3>\n\t\t\t\tExample 2<\/h3>\n<p>Enforce the context of the function using the \"context, function name\" signature. Unbind the handler after first click.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery.proxy demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"test\"<\/span>&gt;<\/span>Test<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"log\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> obj = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#log\"<\/span> ).append( <span class=\"hljs-built_in\">this<\/span>.name );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#test\"<\/span> ).off( <span class=\"hljs-string\">\"click\"<\/span>, obj.test );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#test\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, jQuery.proxy( obj, <span class=\"hljs-string\">\"test\"<\/span> ) );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-2\">\n<h3>\n\t\t\t\tExample 3<\/h3>\n<p>Change the context of a function bound to the click handler,\n    <\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery.proxy demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"test\"<\/span>&gt;<\/span>Test<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"log\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> me = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ I'm a dog<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Note that event comes *after* one and two<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> one, two, event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#log\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ `one` maps to `you`, the 1st additional<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ argument in the $.proxy function call<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .append( <span class=\"hljs-string\">\"&lt;h3&gt;Hello \"<\/span> + one.type + <span class=\"hljs-string\">\":&lt;\/h3&gt;\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ The `this` keyword refers to `me`<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ (the 2nd, context, argument of $.proxy)<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .append( <span class=\"hljs-string\">\"I am a \"<\/span> + <span class=\"hljs-built_in\">this<\/span>.type + <span class=\"hljs-string\">\", \"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ `two` maps to `they`, the 2nd additional<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ argument in the $.proxy function call<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .append( <span class=\"hljs-string\">\"and they are \"<\/span> + two.type + <span class=\"hljs-string\">\".&lt;br&gt;\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ The event type is \"click\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .append( <span class=\"hljs-string\">\"Thanks for \"<\/span> + event.type + <span class=\"hljs-string\">\"ing.\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ The clicked element is `event.target`,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ and its type is \"button\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      .append( <span class=\"hljs-string\">\"the \"<\/span> + event.target.type + <span class=\"hljs-string\">\".\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> you = { <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"cat\"<\/span> };<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> they = { <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"fish\"<\/span> };<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Set up handler to execute me.test() in the context<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ of `me`, with `you` and `they` as additional arguments<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> proxy = $.proxy( me.test, me, you, they );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#test\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, proxy );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Takes a function and returns a new one that will always have a particular context.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,34,76,88,95],"tags":[],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-deprecated-33","category-event-handler-attachment","category-utilities","category-88","category-95"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":5,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"predecessor-version":[{"id":1569,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/430\/revisions\/1569"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}