DOM Lifecycle Events

The event-base 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.

Because all of these events are designed to target elements that aren't present or parsed yet, you must use Y.on(...) to subscribe to them. Y.one('#notHereYet') will return null, and you can't do much with null.

Modern browsers support an event that signals when the markup has been
completely parsed and the DOM tree is built. This event happens before the
window's load event, which fires when all images and other resources have
been fetched. For setting up event subscriptions and core page interactivity,
it's usually enough that all DOM elements are available, regardless of their
loading state.

The domready event abstracts over the patchwork necessary for browsers without a native "domready" event.

Note the subscription signature does not include a target, only the event name and callback.

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 contentready event is for.

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.

Callbacks will be executed with this assigned to the Node matching the selector.

The available event is almost identical to contentready 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 available instead of contentready.

Just put your <script> tags at the bottom

You might not need to use any of these events, and maybe you shouldn't.

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 move scripts to the bottom of the page.