|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>DOM Lifecycle Events</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>DOM Lifecycle Events</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p>The <code>event-base</code> module includes three special events that can be used to execute code as soon as the DOM, or certain elements in the DOM tree, are ready to be scripted.</p> |
|
|
32 |
|
|
|
33 |
<p>Because all of these events are designed to target elements that aren't present or parsed yet, <strong>you must use <code>Y.on(...)</code> to subscribe to them</strong>. <code>Y.one('#notHereYet')</code> will return <code>null</code>, and you can't do much with <code>null</code>.</p> |
|
|
34 |
|
|
|
35 |
<p>Be sure to read <a href="#caveat">the final note on this page</a> about performance.</p> |
|
|
36 |
</div> |
|
|
37 |
|
|
|
38 |
<h2 id="domready"><code>domready</code></h2> |
|
|
39 |
|
|
|
40 |
<pre class="code prettyprint"><!doctype html> |
|
|
41 |
<html> |
|
|
42 |
<head> |
|
|
43 |
<meta charset="utf-8"> |
|
|
44 |
<title>domready</title> |
|
|
45 |
<script src="...yui-min.js"></script> |
|
|
46 |
<script> |
|
|
47 |
YUI().use('event-base', function (Y) { |
|
|
48 |
var notHereYet = Y.one('#readygo'); // null |
|
|
49 |
|
|
|
50 |
Y.on('domready', function () { |
|
|
51 |
Y.one('#readygo').on('click', function () { |
|
|
52 |
Y.log('This works fine, before the images are loaded'); |
|
|
53 |
}); |
|
|
54 |
}); |
|
|
55 |
}); |
|
|
56 |
</script> |
|
|
57 |
</head> |
|
|
58 |
<body> |
|
|
59 |
... lots of markup including images and stuff |
|
|
60 |
<button id="readygo">Go!</button> |
|
|
61 |
</body> |
|
|
62 |
</html></pre> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<p>Modern browsers support an event that signals when the markup has been |
|
|
66 |
completely parsed and the DOM tree is built. This event happens before the |
|
|
67 |
window's <code>load</code> event, which fires when all images and other resources have |
|
|
68 |
been fetched. For setting up event subscriptions and core page interactivity, |
|
|
69 |
it's usually enough that all DOM elements are available, regardless of their |
|
|
70 |
loading state.</p> |
|
|
71 |
|
|
|
72 |
<p>The <code>domready</code> event abstracts over the patchwork necessary for browsers without a native "domready" event.</p> |
|
|
73 |
|
|
|
74 |
<p>Note the subscription signature does not include a target, only the event name and callback.</p> |
|
|
75 |
|
|
|
76 |
<h2 id="contentready"><code>contentready</code></h2> |
|
|
77 |
|
|
|
78 |
<pre class="code prettyprint"><!doctype html> |
|
|
79 |
<html> |
|
|
80 |
<head> |
|
|
81 |
<meta charset="utf-8"> |
|
|
82 |
<title>contentready</title> |
|
|
83 |
<script src="...yui-min.js"></script> |
|
|
84 |
<script> |
|
|
85 |
YUI().use('event-base', function (Y) { |
|
|
86 |
var notHereYet = Y.one('#todoList'); // null |
|
|
87 |
|
|
|
88 |
function addItem() { |
|
|
89 |
// children of #todoList are in the DOM tree |
|
|
90 |
this.one('ul').append('<li>This will be four</li>'); |
|
|
91 |
} |
|
|
92 |
|
|
|
93 |
Y.on('contentready', addItem, '#todoList'); |
|
|
94 |
}); |
|
|
95 |
</script> |
|
|
96 |
</head> |
|
|
97 |
<body> |
|
|
98 |
... lots of markup including images and stuff |
|
|
99 |
<div id="todoList"> |
|
|
100 |
<ul> |
|
|
101 |
<li>one</li> |
|
|
102 |
<li>two</li> |
|
|
103 |
<li>three</li> |
|
|
104 |
</ul> |
|
|
105 |
</div> |
|
|
106 |
... more markup |
|
|
107 |
</body> |
|
|
108 |
</html></pre> |
|
|
109 |
|
|
|
110 |
|
|
|
111 |
<p>You may want to script some nodes that are in the middle of the page markup inside a specific containing element. You just need to know that the container and its children have been parsed from markup and added to the DOM tree. But you don't want to wait for the entire DOM tree to finish. That's what the <code>contentready</code> event is for.</p> |
|
|
112 |
|
|
|
113 |
<p>YUI will check the DOM periodically, looking for an element matching the selector passed as the the third argument. When it finds one and can verify that that element's children are also in the DOM tree, it will execute the callback.</p> |
|
|
114 |
|
|
|
115 |
<p>Callbacks will be executed with <code>this</code> assigned to the Node matching the selector.</p> |
|
|
116 |
|
|
|
117 |
<h2 id="available"><code>available</code></h2> |
|
|
118 |
|
|
|
119 |
<pre class="code prettyprint"><!doctype html> |
|
|
120 |
<html> |
|
|
121 |
<head> |
|
|
122 |
<meta charset="utf-8"> |
|
|
123 |
<title>available</title> |
|
|
124 |
<script src="...yui-min.js"></script> |
|
|
125 |
<script> |
|
|
126 |
YUI().use('event-hover', function (Y) { |
|
|
127 |
var notHereYet = Y.one('#highlight-me'); // null |
|
|
128 |
|
|
|
129 |
function over() { |
|
|
130 |
this.addClass("over"); |
|
|
131 |
} |
|
|
132 |
function out() { |
|
|
133 |
this.removeClass("over"); |
|
|
134 |
} |
|
|
135 |
|
|
|
136 |
function addSubscribers() { |
|
|
137 |
this.on('hover', over, out); |
|
|
138 |
} |
|
|
139 |
|
|
|
140 |
Y.on('available', addSubscribers, '#highlight-me'); |
|
|
141 |
}); |
|
|
142 |
</script> |
|
|
143 |
</head> |
|
|
144 |
<body> |
|
|
145 |
... lots of markup including images and stuff |
|
|
146 |
<div id="highlight-me"> |
|
|
147 |
... stuff that doesn't need to be ready |
|
|
148 |
</div> |
|
|
149 |
... more markup |
|
|
150 |
</body> |
|
|
151 |
</html></pre> |
|
|
152 |
|
|
|
153 |
|
|
|
154 |
<p>The <code>available</code> event is almost identical to <a href="#contentready"><code>contentready</code></a> except it does not wait for children of the matching element to be ready. If your code only needs to reference the targeted Node, not any of its children, use <code>available</code> instead of <code>contentready</code>.</p> |
|
|
155 |
|
|
|
156 |
<h2 id="caveat">Just put your <script> tags at the bottom</h2> |
|
|
157 |
|
|
|
158 |
<p>You might not need to use any of these events, and maybe you shouldn't.</p> |
|
|
159 |
|
|
|
160 |
<p>It is always safe to script nodes defined in the markup above the JavaScript that references it. In practice, if you have the option, it is preferable to move <script> tags below the markup that it needs in place, and often it is best to simply <a href="http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/">move scripts to the bottom of the page</a>.</p> |
|
|
161 |
|
|
|
162 |
<pre class="code prettyprint"><div id="stuff-i-need"> |
|
|
163 |
... |
|
|
164 |
</div> |
|
|
165 |
<script> |
|
|
166 |
// Scripts below markup can access the DOM elements above |
|
|
167 |
YUI().use('node', function (Y) { |
|
|
168 |
Y.one('#stuff-i-need', function () { |
|
|
169 |
Y.log('This will always work'); |
|
|
170 |
}); |
|
|
171 |
}); |
|
|
172 |
</script></pre> |
|
|
173 |
|
|
|
174 |
</div> |
|
|
175 |
</div> |
|
|
176 |
</div> |
|
|
177 |
|
|
|
178 |
<div class="yui3-u-1-4"> |
|
|
179 |
<div class="sidebar"> |
|
|
180 |
|
|
|
181 |
<div id="toc" class="sidebox"> |
|
|
182 |
<div class="hd"> |
|
|
183 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
184 |
</div> |
|
|
185 |
|
|
|
186 |
<div class="bd"> |
|
|
187 |
<ul class="toc"> |
|
|
188 |
<li> |
|
|
189 |
<a href="#domready"><code>domready</code></a> |
|
|
190 |
</li> |
|
|
191 |
<li> |
|
|
192 |
<a href="#contentready"><code>contentready</code></a> |
|
|
193 |
</li> |
|
|
194 |
<li> |
|
|
195 |
<a href="#available"><code>available</code></a> |
|
|
196 |
</li> |
|
|
197 |
<li> |
|
|
198 |
<a href="#caveat">Just put your <script> tags at the bottom</a> |
|
|
199 |
</li> |
|
|
200 |
</ul> |
|
|
201 |
</div> |
|
|
202 |
</div> |
|
|
203 |
|
|
|
204 |
|
|
|
205 |
|
|
|
206 |
<div class="sidebox"> |
|
|
207 |
<div class="hd"> |
|
|
208 |
<h2 class="no-toc">Examples</h2> |
|
|
209 |
</div> |
|
|
210 |
|
|
|
211 |
<div class="bd"> |
|
|
212 |
<ul class="examples"> |
|
|
213 |
|
|
|
214 |
|
|
|
215 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
216 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
217 |
</li> |
|
|
218 |
|
|
|
219 |
|
|
|
220 |
|
|
|
221 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
222 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
223 |
</li> |
|
|
224 |
|
|
|
225 |
|
|
|
226 |
|
|
|
227 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
228 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
229 |
</li> |
|
|
230 |
|
|
|
231 |
|
|
|
232 |
|
|
|
233 |
|
|
|
234 |
|
|
|
235 |
|
|
|
236 |
|
|
|
237 |
|
|
|
238 |
|
|
|
239 |
|
|
|
240 |
|
|
|
241 |
|
|
|
242 |
</ul> |
|
|
243 |
</div> |
|
|
244 |
</div> |
|
|
245 |
|
|
|
246 |
|
|
|
247 |
|
|
|
248 |
<div class="sidebox"> |
|
|
249 |
<div class="hd"> |
|
|
250 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
251 |
</div> |
|
|
252 |
|
|
|
253 |
<div class="bd"> |
|
|
254 |
<ul class="examples"> |
|
|
255 |
|
|
|
256 |
|
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
|
260 |
|
|
|
261 |
|
|
|
262 |
|
|
|
263 |
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
|
264 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
265 |
</li> |
|
|
266 |
|
|
|
267 |
|
|
|
268 |
|
|
|
269 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
270 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
271 |
</li> |
|
|
272 |
|
|
|
273 |
|
|
|
274 |
|
|
|
275 |
<li data-description="Example Photo Browser application."> |
|
|
276 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
277 |
</li> |
|
|
278 |
|
|
|
279 |
|
|
|
280 |
|
|
|
281 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
282 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
283 |
</li> |
|
|
284 |
|
|
|
285 |
|
|
|
286 |
|
|
|
287 |
<li data-description="Use IO to request data over HTTP."> |
|
|
288 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
289 |
</li> |
|
|
290 |
|
|
|
291 |
|
|
|
292 |
</ul> |
|
|
293 |
</div> |
|
|
294 |
</div> |
|
|
295 |
|
|
|
296 |
</div> |
|
|
297 |
</div> |
|
|
298 |
</div> |
|
|
299 |
</div> |
|
|
300 |
|
|
|
301 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
302 |
<script>prettyPrint();</script> |
|
|
303 |
|
|
|
304 |
<script> |
|
|
305 |
YUI.Env.Tests = { |
|
|
306 |
examples: [], |
|
|
307 |
project: '../assets', |
|
|
308 |
assets: '../assets/event', |
|
|
309 |
name: 'event', |
|
|
310 |
title: 'DOM Lifecycle Events', |
|
|
311 |
newWindow: '', |
|
|
312 |
auto: false |
|
|
313 |
}; |
|
|
314 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
315 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
316 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
317 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
318 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
319 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
320 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
321 |
YUI.Env.Tests.examples.push('get'); |
|
|
322 |
|
|
|
323 |
</script> |
|
|
324 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
325 |
|
|
|
326 |
|
|
|
327 |
|
|
|
328 |
</body> |
|
|
329 |
</html> |