uTools-Manuals/docs/jQuery/jQuery.proxy.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.proxy()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/event-handler-attachment/">绑定事件处理器</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/utilities/">工具类</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.proxy/" target="_blank">jQuery.proxy()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-proxy1"><h2 class="section-title">
<span class="name">jQuery.proxy( function, context )</span><span class="returns">返回: <a href="/Types/#Function">Function</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。</p>
<ul class="signatures">
<li class="signature" id="jQuery-proxy-function-context">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>jQuery.proxy( function, context )</h4>
<ul>
<li>
<div><strong>function</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>将要改变上下文语境的函数。</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>函数的上下文语境(<code>this</code>)会被设置成这个 object 对象。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-proxy-context-name">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>jQuery.proxy( context, name )</h4>
<ul>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>函数的上下文语境会被设置成这个 object 对象。</div>
</li>
<li>
<div><strong>name</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>将要改变上下文语境的函数名(这个函数必须是前一个参数 <code>context</code> 对象的属性)。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-proxy-function-context-additionalArguments">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>jQuery.proxy( function, context [, additionalArguments ] )</h4>
<ul>
<li>
<div><strong>function</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>将要改变上下文语境的函数。</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>函数的上下文语境会被设置成这个 object 对象。</div>
</li>
<li>
<div><strong>additionalArguments</strong></div>
<div>类型: <a href="/Types/#Anything">Anything</a>
</div>
<div>任何数目的参数传递给<code>function</code>参数的函数引用。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-proxy-context-name-additionalArguments">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>jQuery.proxy( context, name [, additionalArguments ] )</h4>
<ul>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>函数的上下文语境会被设置成这个 object 对象。</div>
</li>
<li>
<div><strong>name</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>将要改变上下文语境的函数名(这个函数必须是前一个参数 <code>context</code> 对象的属性)。</div>
</li>
<li>
<div><strong>additionalArguments</strong></div>
<div>类型: <a href="/Types/#Anything">Anything</a>
</div>
<div>任何数目的参数传递给<code>name</code>参数中命名的函数。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>这个方法通常在向一个元素上附加事件处理函数时，上下文语境实际是指向另一个对象的情况下使用。另外，jQuery 能够确保即使你绑定的函数是经过 <code>jQuery.proxy()</code> 处理过的函数，你依然可以用原先的函数来正确地取消绑定。</p>
<p>要知道，jQuery的事件绑定子系统为每一个事件处理函数分配一个唯一的ID 用于对其进行跟踪，这样的话，当需要解除绑定特定的事件处理时，系统就知道该解除绑定哪个事件处理函数了。<code>jQuery.proxy()</code>参数中的 function 会被事件子系统当成一个单独的函数，即使是当它用于绑定不同的上下文时。为了避免错误的解除绑定事件，可以在绑定或解除绑定时，使用一个唯一的事件命令空间(例如， <code>"click.myproxy1"</code>)，这样比在解除绑定时仅指定被代理函数要好。</p>
<p><strong>从jQuery 1.6开始</strong>, 任意数量的附加参数可以提供给<code>$.proxy()</code>，并且它们将被传递给那些上下文将被改变的函数。</p>
<p><strong>从jQuery 1.9开始</strong>, 当<code>context</code>为<code>null</code> 或 <code>undefined</code>，代理函数将通过<code>this</code>对象被调用。（注：也就是相当于<code>context</code>为<code>this</code>对象）。允许<code>$.proxy()</code>应用一个函数的部分参数，而不改变上下文。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">修改使用参数为"function, context"的jQuery.proxy()方法绑定的点击事件的上下文语境。并且在第一次点击事件执行后，解除原先的绑定。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
<div class="line n54">54</div>
<div class="line n55">55</div>
<div class="line n56">56</div>
<div class="line n57">57</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">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="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;<span class="title">button</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">id</span>=<span class="value">"test"</span>&gt;</span>Test<span class="tag">&lt;/<span class="title">button</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">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="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> me = {</code></div></div><div class="container"><div class="line"><code>  type: <span class="string">"zombie"</span>,</code></div></div><div class="container"><div class="line"><code>  test: <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code>    <span class="comment">/* Without proxy, `this` would refer to the event target */</span></code></div></div><div class="container"><div class="line"><code>    <span class="comment">/* use event.target to reference that element. */</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> element = event.target;</code></div></div><div class="container"><div class="line"><code>    $(element).css(<span class="string">"background-color"</span>, <span class="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="comment">/* With proxy, `this` refers to the me object encapsulating */</span></code></div></div><div class="container"><div class="line"><code>    <span class="comment">/* this function. */</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"#log"</span>).append( <span class="string">"Hello "</span> + <span class="keyword">this</span>.type + <span class="string">"&lt;br&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"#test"</span>).unbind(<span class="string">"click"</span>, <span class="keyword">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="keyword">var</span> you = {</code></div></div><div class="container"><div class="line"><code>  type: <span class="string">"person"</span>,</code></div></div><div class="container"><div class="line"><code>  test: <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"#log"</span>).append( <span class="keyword">this</span>.type + <span class="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="comment">/* execute you.test() in the context of the `you` object */</span></code></div></div><div class="container"><div class="line"><code><span class="comment">/* no matter where it is called */</span></code></div></div><div class="container"><div class="line"><code><span class="comment">/* i.e. the `this` keyword will refer to `you` */</span></code></div></div><div class="container"><div class="line"><code><span class="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> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* attach click handlers to #test */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#test"</span>)</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">/* this === "zombie"; handler unbound after first click */</span></code></div></div><div class="container"><div class="line"><code>  .on( <span class="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="comment">/* this === "person" */</span></code></div></div><div class="container"><div class="line"><code>  .on( <span class="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="comment">/* this === "zombie" */</span></code></div></div><div class="container"><div class="line"><code>  .on( <span class="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="comment">/* this === "&lt;button&gt; element" */</span></code></div></div><div class="container"><div class="line"><code>  .on( <span class="string">"click"</span>, you.test );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">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="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">通过调用参数为"context, function name"的jQuery.proxy()方法，强制修改函数的上下文语境。 并且在第一次点击事件执行后，解除绑定。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">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="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"test"</span>&gt;</span>Test<span class="tag">&lt;/<span class="title">button</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">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="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> obj = {</code></div></div><div class="container"><div class="line"><code>    name: <span class="string">"John"</span>,</code></div></div><div class="container"><div class="line"><code>    test: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>      $(<span class="string">"#log"</span>).append( <span class="keyword">this</span>.name );</code></div></div><div class="container"><div class="line"><code>      $(<span class="string">"#test"</span>).off(<span class="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> </code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"#test"</span>).on( <span class="string">"click"</span>, jQuery.proxy( obj, <span class="string">"test"</span> ) );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">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="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">更改绑定点击处理程序函数的上下文。
			    </span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
<div class="line n54">54</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">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="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;<span class="title">button</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">id</span>=<span class="value">"test"</span>&gt;</span>Test<span class="tag">&lt;/<span class="title">button</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">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="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> me = {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">/* I'm a dog */</span></code></div></div><div class="container"><div class="line"><code>  type: <span class="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="comment">/* Note that event comes *after* one and two */</span></code></div></div><div class="container"><div class="line"><code>  test: <span class="keyword">function</span>(one, two, event) {</code></div></div><div class="container"><div class="line"><code>    $(<span class="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="comment">/* `one` maps to `you`, the 1st additional */</span></code></div></div><div class="container"><div class="line"><code>      <span class="comment">/* argument in the $.proxy function call */</span></code></div></div><div class="container"><div class="line"><code>      .append( <span class="string">"&lt;h3&gt;Hello "</span> + one.type + <span class="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="comment">/* the `this` keyword refers to `me` */</span></code></div></div><div class="container"><div class="line"><code>      <span class="comment">/*(the 2nd, context, argument of $.proxy) */</span></code></div></div><div class="container"><div class="line"><code>      .append( <span class="string">"I am a "</span> + <span class="keyword">this</span>.type + <span class="string">", "</span> )</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>      <span class="comment">/* `two` maps to `they`, the 2nd additional */</span></code></div></div><div class="container"><div class="line"><code>      <span class="comment">/* argument in the $.proxy function call */</span></code></div></div><div class="container"><div class="line"><code>      .append( <span class="string">"and they are "</span> + two.type + <span class="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="comment">/* the event type is "click" */</span></code></div></div><div class="container"><div class="line"><code>      .append( <span class="string">"Thanks for "</span> + event.type + <span class="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="comment">/* the clicked element is `event.target`, */</span></code></div></div><div class="container"><div class="line"><code>      <span class="comment">/* and its type is "button" */</span></code></div></div><div class="container"><div class="line"><code>      .append( <span class="string">"the "</span> + event.target.type + <span class="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="keyword">var</span> you = { type: <span class="string">"cat"</span> };</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> they = { type: <span class="string">"fish"</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><span class="comment">/* Set up handler to execute me.test() in the context */</span></code></div></div><div class="container"><div class="line"><code><span class="comment">/* of `me`, with `you` and `they` as additional arguments */</span></code></div></div><div class="container"><div class="line"><code><span class="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="string">"#test"</span>)</code></div></div><div class="container"><div class="line"><code>.on( <span class="string">"click"</span>, proxy );</code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;/<span class="title">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="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>