|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <title>YUI Library Examples: Attribute: Attribute Change Events</title> |
|
6 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
7 <link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
8 |
|
9 <style> |
|
10 /*Supplemental CSS for the YUI distribution*/ |
|
11 #custom-doc { width: 95%; min-width: 950px; } |
|
12 #pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
13 /* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
14 </style> |
|
15 |
|
16 <link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
17 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
18 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
19 <style type="text/css"> |
|
20 #example-out .event { |
|
21 padding:2px 2px 2px 5px; |
|
22 } |
|
23 |
|
24 #example-out .event-props { |
|
25 font-family:courier; |
|
26 margin-top:2px; |
|
27 } |
|
28 |
|
29 #example-out .event-title { |
|
30 font-weight:bold; |
|
31 font-family:arial; |
|
32 color:#8dd5e7; |
|
33 margin-top:5px; |
|
34 margin-bottom:3px; |
|
35 } |
|
36 |
|
37 #example-out { |
|
38 margin:5px; |
|
39 border:1px solid #000; |
|
40 color:#ffffff; |
|
41 background-color:#004c6d; |
|
42 overflow:auto; |
|
43 height:20em; |
|
44 } |
|
45 |
|
46 .attrs { |
|
47 border:1px solid #000; |
|
48 background-color:#cdcdcd; |
|
49 margin:5px; |
|
50 } |
|
51 |
|
52 .attrs .header { |
|
53 font-weight:bold; |
|
54 background-color:#aaa; |
|
55 padding:5px; |
|
56 } |
|
57 |
|
58 .attrs .body { |
|
59 padding:10px; |
|
60 } |
|
61 |
|
62 .attrs .footer { |
|
63 padding:5px; |
|
64 } |
|
65 |
|
66 .attrs label { |
|
67 display:block; |
|
68 float:left; |
|
69 clear:left; |
|
70 font-weight:bold; |
|
71 width:8em; |
|
72 } |
|
73 |
|
74 .attrs #preventFoobar.hidden { |
|
75 display:none; |
|
76 } |
|
77 |
|
78 .attrs #preventFoobar { |
|
79 margin-left:5px; |
|
80 display:inline; |
|
81 float:none; |
|
82 clear:none; |
|
83 } |
|
84 </style> |
|
85 </head> |
|
86 <body id="yahoo-com" class=" yui-skin-sam"> |
|
87 <div id="custom-doc" class="yui-t2"> |
|
88 <div id="hd"> |
|
89 <div id="ygunav"> |
|
90 <p> |
|
91 <em> |
|
92 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
93 </em> |
|
94 </p> |
|
95 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
96 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
97 <input name="vs" type="hidden" value="yuiblog.com"> |
|
98 <div id="sitesearch"> |
|
99 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
100 <input type="text" id="searchinput" name="p"> |
|
101 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
102 </div> |
|
103 </form> |
|
104 </div> |
|
105 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
106 <div id="pagetitle"><h1>YUI Library Examples: Attribute: Attribute Change Events</h1></div> |
|
107 </div> |
|
108 <div id="bd"> |
|
109 |
|
110 |
|
111 <div id="yui-main"> |
|
112 <div class="yui-b"> |
|
113 <div class="yui-ge"> |
|
114 <div class="yui-u first example" id="main"> |
|
115 |
|
116 <h2>Attribute: Attribute Change Events</h2> |
|
117 |
|
118 <div id="example" class="promo"> |
|
119 <div class="example-intro"> |
|
120 Attribute change events are one of the key benefits of using attributes to maintain state for your objects, instead of regular object properties. This example shows how you can listen for attribute change events and work with the event payload they receive. |
|
121 </div> |
|
122 |
|
123 <div class="module example-container "> |
|
124 <div class="hd exampleHd"> |
|
125 <p class="newWindowButton yui-skin-sam"> |
|
126 <a href="attribute-event_clean.html" target="_blank">View example in new window.</a> |
|
127 </p> |
|
128 </div> <div id="example-canvas" class="bd"> |
|
129 |
|
130 |
|
131 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
132 |
|
133 <div class="attrs"> |
|
134 <div class="header">Enter a new value and click the "Change Value" button:</div> |
|
135 <div class="body"> |
|
136 <p> |
|
137 <label for="attrSel">Attribute</label>: |
|
138 <select id="attrSel"> |
|
139 <option value="foo">foo</option> |
|
140 <option value="bar">bar</option> |
|
141 <option value="foobar">foobar</option> |
|
142 </select> |
|
143 <label id="preventFoobar" class="hidden"><input type="checkbox" checked="true"> Prevent change</label> |
|
144 </p> |
|
145 <p><label for="currentVal">Current Value</label>: <span id="currentVal"></span></p> |
|
146 <p><label for="newVal">New Value</label>: <input type="text" id="newVal" /></p> |
|
147 </div> |
|
148 <div class="footer"> |
|
149 <button type="button" id="changeValue">Change Value</button> |
|
150 </div> |
|
151 </div> |
|
152 |
|
153 <div id="example-out"></div> |
|
154 |
|
155 <script type="text/javascript"> |
|
156 // Get a new YUI instance |
|
157 YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) { |
|
158 |
|
159 // Setup a custom class with attribute support |
|
160 function MyClass(cfg) { |
|
161 |
|
162 // Setup attribute configuration |
|
163 var attrs = { |
|
164 "foo" : { |
|
165 value:5 |
|
166 }, |
|
167 |
|
168 "bar" : { |
|
169 value:"Hello World!" |
|
170 }, |
|
171 |
|
172 "foobar" : { |
|
173 value:true |
|
174 } |
|
175 }; |
|
176 |
|
177 this.addAttrs(attrs, cfg); |
|
178 } |
|
179 |
|
180 Y.augment(MyClass, Y.Attribute); |
|
181 |
|
182 var o1 = new MyClass(); |
|
183 |
|
184 function displayEvent(e, title) { |
|
185 var str = '<div class="event"><div class="event-title">' + title + '</div>'; |
|
186 |
|
187 if (e) { |
|
188 str += |
|
189 '<ul class="event-props"><li>e.attrName: ' |
|
190 + e.attrName |
|
191 + '</li><li>e.prevVal: ' |
|
192 + e.prevVal |
|
193 + '</li><li>e.newVal: ' |
|
194 + e.newVal |
|
195 + '</li></ul></div>'; |
|
196 } |
|
197 |
|
198 str += '</div>'; |
|
199 |
|
200 Y.one("#example-out").prepend(str); |
|
201 } |
|
202 |
|
203 // Start Example Form Handling |
|
204 var attrSel = Y.one("#attrSel"); |
|
205 var newValTxt = Y.one("#newVal"); |
|
206 var currentValSpan = Y.one("#currentVal"); |
|
207 var preventFoobarChk = Y.one("#preventFoobar input[type=checkbox]"); |
|
208 var preventFoobarLbl = Y.one("#preventFoobar"); |
|
209 |
|
210 var attrOpts = attrSel.get("options"); |
|
211 |
|
212 function updateVal() { |
|
213 var selIndex = attrSel.get("selectedIndex"); |
|
214 var attr = attrOpts.item(selIndex).get("value"); |
|
215 o1.set(attr, newValTxt.get("value")); |
|
216 } |
|
217 |
|
218 Y.on("click", updateVal, "#changeValue"); |
|
219 |
|
220 function populateCurrentValue() { |
|
221 var selIndex = attrSel.get("selectedIndex"); |
|
222 var attr = attrOpts.item(selIndex).get("value"); |
|
223 |
|
224 currentValSpan.set("innerHTML", o1.get(attr)); |
|
225 newValTxt.set("value", ""); |
|
226 |
|
227 if (attr === "foobar") { |
|
228 preventFoobarLbl.removeClass("hidden"); |
|
229 } else { |
|
230 preventFoobarLbl.addClass("hidden"); |
|
231 } |
|
232 } |
|
233 |
|
234 populateCurrentValue(); |
|
235 |
|
236 Y.on("change", populateCurrentValue, attrSel); |
|
237 // End Example Form Handling |
|
238 |
|
239 // Attribute Change Event Listners |
|
240 |
|
241 o1.after("fooChange", function(e) { |
|
242 displayEvent(e, "After fooChange"); |
|
243 currentValSpan.set("innerHTML", e.newVal); |
|
244 }); |
|
245 |
|
246 o1.after("barChange", function(e) { |
|
247 displayEvent(e, "After barChange"); |
|
248 currentValSpan.set("innerHTML", e.newVal); |
|
249 }); |
|
250 |
|
251 o1.on("foobarChange", function(e) { |
|
252 |
|
253 if (preventFoobarChk.get("checked")) { |
|
254 |
|
255 // Calling preventDefault, in an "on" listener |
|
256 // will prevent the attribute change from occuring |
|
257 // and the after listener being called. |
|
258 |
|
259 e.preventDefault(); |
|
260 displayEvent(null, "On foobarChange (prevented)"); |
|
261 } |
|
262 |
|
263 }); |
|
264 |
|
265 o1.after("foobarChange", function(e) { |
|
266 |
|
267 // This foobar after listener will not get called, |
|
268 // if we end up preventing default in the "on" |
|
269 // listener above. |
|
270 |
|
271 displayEvent(e, "After foobarChange"); |
|
272 currentValSpan.set("innerHTML", e.newVal); |
|
273 }); |
|
274 |
|
275 }); |
|
276 </script> |
|
277 |
|
278 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
279 |
|
280 |
|
281 </div> |
|
282 </div> |
|
283 </div> |
|
284 |
|
285 <h3>Listening For Attribute Change Events</h3> |
|
286 |
|
287 <p>In this example, we'll look at how you can setup listeners for attribute change events, and work with the event payload which the listeners receive.</p> |
|
288 |
|
289 <h4>Setting Up A Custom Class With Attribute</h4> |
|
290 |
|
291 <p>We start by setting up the same custom class we created for the <a href="attribute-basic.html">basic example</a> with 3 attributes <code>foo</code>, <code>bar</code> and <code>foobar</code>, using the code below:</p> |
|
292 |
|
293 <div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Setup a custom class with attribute support</span></div></li><li class="li1"><div class="de1"> <span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Setup attribute configuration</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="st0">"foo"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">5</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="st0">"bar"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="st0">"Hello World!"</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="st0">"foobar"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
294 |
|
295 <span class="co1">// Setup a custom class with attribute support</span> |
|
296 <span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
297 |
|
298 <span class="co1">// Setup attribute configuration</span> |
|
299 <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span> |
|
300 <span class="st0">"foo"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
301 value<span class="sy0">:</span><span class="nu0">5</span> |
|
302 <span class="br0">}</span><span class="sy0">,</span> |
|
303 |
|
304 <span class="st0">"bar"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
305 value<span class="sy0">:</span><span class="st0">"Hello World!"</span> |
|
306 <span class="br0">}</span><span class="sy0">,</span> |
|
307 |
|
308 <span class="st0">"foobar"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
309 value<span class="sy0">:</span><span class="kw2">true</span> |
|
310 <span class="br0">}</span> |
|
311 <span class="br0">}</span><span class="sy0">;</span> |
|
312 |
|
313 <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span> |
|
314 <span class="br0">}</span> |
|
315 |
|
316 Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span> |
|
317 |
|
318 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI().use("attribute", "node", function(Y) { |
|
319 |
|
320 // Setup a custom class with attribute support |
|
321 function MyClass(cfg) { |
|
322 |
|
323 // Setup attribute configuration |
|
324 var attrs = { |
|
325 "foo" : { |
|
326 value:5 |
|
327 }, |
|
328 |
|
329 "bar" : { |
|
330 value:"Hello World!" |
|
331 }, |
|
332 |
|
333 "foobar" : { |
|
334 value:true |
|
335 } |
|
336 }; |
|
337 |
|
338 this.addAttrs(attrs, cfg); |
|
339 } |
|
340 |
|
341 Y.augment(MyClass, Y.Attribute); |
|
342 |
|
343 });</textarea></div> |
|
344 <h4>Registering Event Listeners</h4> |
|
345 |
|
346 <p>Once we have an instance of the custom class, we can use the <code>on</code> and <code>after</code> methods provided by Attribute, to listen for changes in the value of each of the attributes:</p> |
|
347 |
|
348 <div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> o1 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co1">// Event Listners</span></div></li><li class="li1"><div class="de1">o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"fooChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After fooChange"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"barChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After barChange"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">o1.<span class="me1">on</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>preventFoobarChk.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Calling preventDefault, in an "on" listener</span></div></li><li class="li1"><div class="de1"> <span class="co1">// will prevent the attribute change from occuring</span></div></li><li class="li1"><div class="de1"> <span class="co1">// and the after listener being called.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> displayEvent<span class="br0">(</span><span class="kw2">null</span><span class="sy0">,</span> <span class="st0">"On foobarChange (prevented)"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// This foobar after listener will not get called, </span></div></li><li class="li1"><div class="de1"> <span class="co1">// if we end up preventing default in the "on" </span></div></li><li class="li1"><div class="de1"> <span class="co1">// listener above.</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After foobarChange"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> o1 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
349 |
|
350 ... |
|
351 |
|
352 <span class="co1">// Event Listners</span> |
|
353 o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"fooChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
354 displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After fooChange"</span><span class="br0">)</span><span class="sy0">;</span> |
|
355 currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
356 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
357 |
|
358 o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"barChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
359 displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After barChange"</span><span class="br0">)</span><span class="sy0">;</span> |
|
360 currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
361 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
362 |
|
363 o1.<span class="me1">on</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
364 |
|
365 <span class="kw1">if</span> <span class="br0">(</span>preventFoobarChk.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
366 |
|
367 <span class="co1">// Calling preventDefault, in an "on" listener</span> |
|
368 <span class="co1">// will prevent the attribute change from occuring</span> |
|
369 <span class="co1">// and the after listener being called.</span> |
|
370 |
|
371 e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
372 displayEvent<span class="br0">(</span><span class="kw2">null</span><span class="sy0">,</span> <span class="st0">"On foobarChange (prevented)"</span><span class="br0">)</span><span class="sy0">;</span> |
|
373 <span class="br0">}</span> |
|
374 |
|
375 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
376 |
|
377 o1.<span class="me1">after</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
378 |
|
379 <span class="co1">// This foobar after listener will not get called, </span> |
|
380 <span class="co1">// if we end up preventing default in the "on" </span> |
|
381 <span class="co1">// listener above.</span> |
|
382 |
|
383 displayEvent<span class="br0">(</span>e<span class="sy0">,</span> <span class="st0">"After foobarChange"</span><span class="br0">)</span><span class="sy0">;</span> |
|
384 currentValSpan.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
385 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">var o1 = new MyClass(); |
|
386 |
|
387 ... |
|
388 |
|
389 // Event Listners |
|
390 o1.after("fooChange", function(e) { |
|
391 displayEvent(e, "After fooChange"); |
|
392 currentValSpan.set("innerHTML", e.newVal); |
|
393 }); |
|
394 |
|
395 o1.after("barChange", function(e) { |
|
396 displayEvent(e, "After barChange"); |
|
397 currentValSpan.set("innerHTML", e.newVal); |
|
398 }); |
|
399 |
|
400 o1.on("foobarChange", function(e) { |
|
401 |
|
402 if (preventFoobarChk.get("checked")) { |
|
403 |
|
404 // Calling preventDefault, in an "on" listener |
|
405 // will prevent the attribute change from occuring |
|
406 // and the after listener being called. |
|
407 |
|
408 e.preventDefault(); |
|
409 displayEvent(null, "On foobarChange (prevented)"); |
|
410 } |
|
411 |
|
412 }); |
|
413 |
|
414 o1.after("foobarChange", function(e) { |
|
415 |
|
416 // This foobar after listener will not get called, |
|
417 // if we end up preventing default in the "on" |
|
418 // listener above. |
|
419 |
|
420 displayEvent(e, "After foobarChange"); |
|
421 currentValSpan.set("innerHTML", e.newVal); |
|
422 });</textarea></div> |
|
423 <p>As seen in the above code, the event type for attribute change events is created by concatenating the attribute name with <code>"Change"</code> (e.g. <code>"fooChange"</code>), and this event type is used for both the <code>on</code> and <code>after</code> subscription methods. Whenever an attribute value is changed through Attribute's <code>set</code> method, both "on" and "after" subscribers are notified.</p> |
|
424 |
|
425 <h4>On vs. After</h4> |
|
426 |
|
427 <p><strong>on :</strong> Subscribers to the "on" moment, will be notified <em>before</em> any actual state change has occurred. This provides the opportunity to prevent the state change from occurring, using the <code>preventDefault</code> method of the event facade object passed to the subscriber. If you use <code>get</code> to retrieve the value of the attribute in an "on" subscriber, you will receive the current, unchanged value. However the event facade provides access to the value which the attribute is being set to, through it's <code>newVal</code> property.</p> |
|
428 |
|
429 <p><strong>after :</strong> Subscribers to the "after" moment, will be notified <em>after</em> the attribute's state has been updated. This provides the opportunity to update state in other parts of your application, in response to a change in the attribute's state.</p> |
|
430 |
|
431 <p>Based on the definition above, <code>after</code> listeners are not invoked if state change is prevented, for example, due to one of the <code>on</code> listeners calling <code>preventDefault</code> on the event object, as is done in the <code>on</code> listener for the <code>foobar</code> attribute:</p> |
|
432 |
|
433 <div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">o1.<span class="me1">on</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Calling preventDefault, in an "on" listener</span></div></li><li class="li1"><div class="de1"> <span class="co1">// will prevent the attribute change from occurring</span></div></li><li class="li2"><div class="de2"> <span class="co1">// and prevent the after listeners from being called</span></div></li><li class="li1"><div class="de1"> displayEvent<span class="br0">(</span>event<span class="sy0">,</span> <span class="st0">"on foobarChange (change prevented)"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">o1.<span class="me1">on</span><span class="br0">(</span><span class="st0">"foobarChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span> |
|
434 |
|
435 <span class="co1">// Calling preventDefault, in an "on" listener</span> |
|
436 <span class="co1">// will prevent the attribute change from occurring</span> |
|
437 <span class="co1">// and prevent the after listeners from being called</span> |
|
438 displayEvent<span class="br0">(</span>event<span class="sy0">,</span> <span class="st0">"on foobarChange (change prevented)"</span><span class="br0">)</span><span class="sy0">;</span> |
|
439 |
|
440 event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
441 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">o1.on("foobarChange", function(event) { |
|
442 |
|
443 // Calling preventDefault, in an "on" listener |
|
444 // will prevent the attribute change from occurring |
|
445 // and prevent the after listeners from being called |
|
446 displayEvent(event, "on foobarChange (change prevented)"); |
|
447 |
|
448 event.preventDefault(); |
|
449 });</textarea></div> |
|
450 <p>For primitive values (non-Object values), the <code>after</code> listeners will also not be invoked if there is no change in the actual value of the attribute. That is, if the new value of the attribute is the same as the current value (based on the identity operator, <code>===</code>), the <code>after</code> listeners will not be notified because there is no change in state. You can see this, by setting an attribute to the same value twice in a row.</p> |
|
451 |
|
452 <h4>Event Facade</h4> |
|
453 |
|
454 <p>The event object (an instance of <a href="../../api/EventFacade.html">EventFacade</a>) passed to attribute change event subscribers, has the following interesting properties and methods related to attribute management:</p> |
|
455 |
|
456 <dl> |
|
457 <dt>newVal</dt> |
|
458 <dd>The value which the attribute will be set to (in the case of "on" subscribers), or has been set to (in the case of "after" subscribers</dd> |
|
459 <dt>prevVal</dt> |
|
460 <dd>The value which the attribute is currently set to (in the case of "on" subscribers), or was previously set to (in the case of "after" subscribers</dd> |
|
461 <dt>attrName</dt> |
|
462 <dd>The name of the attribute which is being set</dd> |
|
463 <dt>subAttrName</dt> |
|
464 <dd>Attribute also allows you to set nested properties of attributes which have values which are objects through the |
|
465 <code>set</code> method (e.g. <code>o1.set("x.y.z")</code>). This property will contain the path to the property which was changed.</dd> |
|
466 <dt>preventDefault()<dt> |
|
467 <dd>This method can be called in an "on" subscriber to prevent the attribute's value from being updated (the default behavior). Calling this method in an "after" listener has no impact, since the default behavior has already been invoked.</dd> |
|
468 <dt>stopImmediatePropagation()</dt> |
|
469 <dd>This method can be called in "on" or "after" subscribers, and will prevent the rest of the subscriber stack from |
|
470 being invoked, but will not prevent the attribute's value from being updated.</dd> |
|
471 </dl> |
|
472 |
|
473 <p>The <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a> provides a look at how you can leverage attribute change events in your applications, to decouple logic both within your class, and when interacting with other objects.</p> </div> |
|
474 <div class="yui-u sidebar"> |
|
475 |
|
476 |
|
477 <div id="examples" class="mod box4"> |
|
478 <div class="hd"> |
|
479 <h4> |
|
480 Attribute Examples:</h4> |
|
481 </div> |
|
482 <div class="bd"> |
|
483 <ul> |
|
484 <li><a href='../attribute/attribute-basic.html'>Basic Attribute Configuration</a></li><li><a href='../attribute/attribute-rw.html'>Read-Only and Write-Once Attributes</a></li><li class='selected'><a href='../attribute/attribute-event.html'>Attribute Change Events</a></li><li><a href='../attribute/attribute-basic-speeddate.html'>Attribute Based Speed Dating</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators</a></li> </ul> |
|
485 </div> |
|
486 </div> |
|
487 |
|
488 <div class="mod box4"> |
|
489 <div class="hd"> |
|
490 <h4>More Attribute Resources:</h4> |
|
491 </div> |
|
492 <div class="bd"> |
|
493 <ul> |
|
494 <!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> --> |
|
495 <li><a href="../../api/module_attribute.html">API Documentation</a></li></ul> |
|
496 </div> |
|
497 </div> |
|
498 </div> |
|
499 </div> |
|
500 |
|
501 </div> |
|
502 </div> |
|
503 |
|
504 |
|
505 <div class="yui-b toc3" id="tocWrapper"> |
|
506 <!-- TABLE OF CONTENTS --> |
|
507 <div id="toc"> |
|
508 |
|
509 <ul> |
|
510 <li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="selected "><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
511 </div> |
|
512 </div> |
|
513 </div><!--closes bd--> |
|
514 |
|
515 <div id="ft"> |
|
516 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
517 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
518 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
519 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
520 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
521 </div> |
|
522 </div> |
|
523 <script language="javascript"> |
|
524 var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
525 </script> |
|
526 <script src="../../assets/syntax.js"></script> |
|
527 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
528 <script language="javascript"> |
|
529 dp.SyntaxHighlighter.HighlightAll('code'); |
|
530 </script> |
|
531 </body> |
|
532 </html> |