<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<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>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<h1>Event</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style>
#contentContainer {padding:1em; background:#999966;}
#contentContainer ul {height:0px; overflow:hidden;}
</style>
<div class="intro">
<p>As web pages get richer, they tend to get slower. One way to make your
pages as responsive as possible is to carefully storyboard the page-load
and page-paint processes so that the interactions most central to the
page's purpose are enabled as early as possible. The window object's
<code>load</code> event won't happen until the full DOM and all image data
have loaded. Putting off script execution until after the page loads can
be optimal for some scripts, but sometimes you won't want to wait that long
to begin interacting with the page via script.</p>
<p>The Event Utility gives you three additional interesting moments that
occur during a page's load process: <a href="domready.html"><code>available</code>,
<code>contentready</code>, and <code>domready</code></a>.</p>
<p>In the example box below, all three events are all in use. A
<code><div></code> (with a green background) loads; it has 100 children;
one of those children is an arbitrarily large image that will take awhile to
load.</p>
<p>
<strong>Note:</strong> The order of the events isn't guaranteed because
<code>available</code> and <code>contentready</code> are fired from a polling mechanism, and
not all browsers support a native event to signal <code>domready</code>, so that
will fall back to a timer as well. Using these events, you can trust
the state of the DOM per subscription, but don't expect strict ordering
between events.
</p>
<p><strong>Internet Explorer note:</strong> It isn't always safe to modify
content during the available/contentready until after the <code>domready</code>
moment.</p>
</div>
<div class="example yui3-skin-sam">
<!-- include event dependencies -->
<script src="../build/oop/oop-min.js"></script>
<script src="../build/event-custom-base/event-custom-base-min.js"></script>
<script src="../build/event-custom-complex/event-custom-complex-min.js"></script>
<script src="../build/intl/intl-min.js"></script>
<script src="../build/dom-core/dom-core-min.js"></script>
<script src="../build/dom-base/dom-base-min.js"></script>
<script src="../build/selector-native/oop-min.js"></script>
<script src="../build/node-core/node-core-min.js"></script>
<script src="../build/node-base/node-base-min.js"></script>
<script src="../build/event-base/event-base-min.js"></script>
<div id="contentContainer">
<div id="demo"></div>
<!--a ul with an arbitrarily large number of children:-->
<ul>
</ul>
<img src="../assets/event/uluru.jpg" width="500" alt="Uluru" id="image" />
</div>
<script>
YUI().use('*', function (Y) {
var results = Y.one('#demo');
//assign page load handler:
Y.on("load", function () {
results.append("<p>The window load event fired. The page and all of its image data, including the large image of Uluru, has completed loading.</p>");
}, Y.config.win);
//assign domready handler:
Y.on("domready", function () {
results.append("<p>The 'domready' event fired. The DOM is now safe to modify via script.</p>");
});
//assign 'contentready' handler:
Y.on("contentready", function () {
results.append("<p>The 'contentready' event fired for the element 'contentContainer'. That element and all of its children are present in the DOM.</p>");
}, "#contentContainer");
//assign 'available' handler:
Y.on("available", function () {
results.append("<p>The 'available' event fired on the element 'contentContainer'. That element is present in the DOM.</p>");
}, "#contentContainer");
results.append("<p>As the page loads, you'll see the 'available', 'contentready', 'domready', and window load events logged here as they fire in sequence.</p>");
});
</script>
</div>
<h2 class="first" id="source-code-for-this-example">Source Code for This Example:</h2>
<h3 id="markup">Markup:</h3>
<p>The markup used to create the DOM is very simple, consisting of a <code><div></code> that holds a <code><ul></code> with 100 child <code><li></code>s and a single ~3MB image. The <code><ul></code> will take a little time to load, and the image (loading over the internet) will take a few seconds to load even on a fast connection. That should allow us to see in the browser console some time deltas between when the <code><div></code> whose ID is <code>contentContainer</code> becomes available, when its children (those 100 <code><li></code>s) are ready, when the DOM is ready (including all the navigation elements on the page), and lastly when the page loads (ie, when that ~3MB image is fully loaded). </p>
<pre class="code prettyprint"><div id="contentContainer">
<!--a ul with an arbitrarily large number of children:-->
<ul>
<li>...</li>
<!--...100 more of these-->
</ul>
<img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/large/uluru.jpg" width="500" alt="Uluru" id="image" />
</div></pre>
<h3 id="css">CSS:</h3>
<p>The CSS colors the contentContainer element and hides the big list to keep the example more compact.</p>
<pre class="code prettyprint"><style type="text/css">
#contentContainer {padding:1em; background:#999966;}
#contentContainer ul {height:0px; overflow:hidden;}
</style></pre>
<h3 id="javascript">JavaScript:</h3>
<p>In the script, we subscribe to the four events in which we're interested and, in each case, log a message to the console to express the timing of the events as they fire.</p>
<pre class="code prettyprint">YUI().use('*', function(Y) {
var results = Y.one('#demo');
//assign page load handler:
Y.on("load", function () {
results.append("<p>The window load event fired. The page and all of its image data, including the large image of Uluru, has completed loading.</p>");
}, Y.config.win);
//assign domready handler:
Y.on("domready", function () {
results.append("<p>The DOMContentLoaded event fired. The DOM is now safe to modify via script.</p>");
});
//assign 'contentready' handler:
Y.on("contentready", function () {
results.append("<p>The 'contentready' event fired for the element 'contentContainer'. That element and all of its children are present in the DOM.</p>");
}, "#contentContainer");
//assign 'available' handler:
Y.on("available", function () {
results.append("<p>The 'available' event fired on the element 'contentContainer'. That element is present in the DOM.</p>");
}, "#contentContainer");
results.append("<p>As the page loads, you'll see the 'available', 'contentready', 'domready', and window load events logged here as they fire in sequence.</p>");
});</pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#source-code-for-this-example">Source Code for This Example:</a>
<ul class="toc">
<li>
<a href="#markup">Markup:</a>
</li>
<li>
<a href="#css">CSS:</a>
</li>
<li>
<a href="#javascript">JavaScript:</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Use the Event Utility to attach simple DOM event handlers.">
<a href="basic-example.html">Simple DOM Events</a>
</li>
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.">
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>
</li>
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events">
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<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.">
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
</li>
<li data-description="Shows how to extend the base widget class, to create your own Widgets.">
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a>
</li>
<li data-description="Example Photo Browser application.">
<a href="../dd/photo-browser.html">Photo Browser</a>
</li>
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
<a href="../dd/portal-drag.html">Portal Style Example</a>
</li>
<li data-description="Use IO to request data over HTTP.">
<a href="../io/get.html">HTTP GET to request data</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/event',
name: 'event',
title: 'Event',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('basic-example');
YUI.Env.Tests.examples.push('synth-example');
YUI.Env.Tests.examples.push('swipe-example');
YUI.Env.Tests.examples.push('node-focusmanager-button');
YUI.Env.Tests.examples.push('widget-extend');
YUI.Env.Tests.examples.push('photo-browser');
YUI.Env.Tests.examples.push('portal-drag');
YUI.Env.Tests.examples.push('get');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>