1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.proxy()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/events/" title="View all posts in Events">Events</a> > <a href="http://api.jquery.com/category/events/event-handler-attachment/" title="View all posts in Event Handler Attachment">Event Handler Attachment</a></span> | <span class="category"><a href="http://api.jquery.com/category/utilities/" title="View all posts in Utilities">Utilities</a></span>
</div>
</div>
<div id="jQuery-proxy1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.proxy( function, context )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Function">Function</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Takes a function and returns a new one that will always have a particular context.</p>
<ul class="signatures">
<li class="signature" id="jQuery-proxy-function-context">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>jQuery.proxy( function, context )</h4>
<p class="arguement"><strong>function</strong>The function whose context will be changed.</p>
<p class="arguement"><strong>context</strong>The object to which the context (<code>this</code>) of the function should be set.</p>
</li>
<li class="signature" id="jQuery-proxy-context-name">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>jQuery.proxy( context, name )</h4>
<p class="arguement"><strong>context</strong>The object to which the context of the function should be set.</p>
<p class="arguement"><strong>name</strong>The name of the function whose context will be changed (should be a property of the <code>context</code> object).</p>
</li>
</ul>
<div class="longdesc">
<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>
<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>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Change the context of functions bound to a click handler using the "function, context" signature. Unbind the first handler after first click.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
type: "zombie",
test: function(event) {
// Without proxy, `this` would refer to the event target
// use event.target to reference that element.
var element = event.target;
$(element).css("background-color", "red");
// With proxy, `this` refers to the me object encapsulating
// this function.
$("#log").append( "Hello " + this.type + "<br>" );
$("#test").unbind("click", this.test);
}
};
var you = {
type: "person",
test: function(event) {
$("#log").append( this.type + " " );
}
};
// execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );
// attach click handlers to #test
$("#test")
// this === "zombie"; handler unbound after first click
.click( $.proxy( me.test, me ) )
// this === "person"
.click( youClick )
// this === "zombie"
.click( $.proxy( you.test, me ) )
// this === "<button> element"
.click( you.test );
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Enforce the context of the function using the "context, function name" signature. Unbind the handler after first click.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p><button id="test">Test</button></p>
<p id="log"></p>
<script>
var obj = {
name: "John",
test: function() {
$("#log").append( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
