Search

1/14/2008

onAvailable, onContentReady, onDOMReady, onLoad

YUI Library Examples: Event Utility: Using onAvailable, onContentReady, and onDOMReady

1. onAvailable: onAvailable targets a single element and fires when that element is available (when it responds to document.getElementById()) — but you can't count on the element's children having been loaded at this point.
2. onContentReady: When you care about not just your target element but its children as well, use onContentReady. This method will tell you that your target element and all of its children are present in the DOM.
3. onDOMReady: Some DOM scripting operations cannot be performed safely until the page's entire DOM has loaded. onDOMReady will let you know that the DOM is fully loaded and ready for you to modify via script.

(1) becomes available, (2) its content becomes ready (after all of its 100 children have loaded), (3) the DOM becomes ready, and finally (4) the page loads.


init: function() {

//assign page load handler:
YAHOO.util.Event.on(window, "load", this.fnLoadHandler, "The window.onload event fired. The page and all of its image data, including the large image of Uluru, has completed loading.");

//assign onDOMReady handler:
YAHOO.util.Event.onDOMReady(this.fnHandler, "The onDOMReady event fired. The DOM is now safe to modify via script.");

//assign onContentReady handler:
YAHOO.util.Event.onContentReady("contentContainer", this.fnHandler, "The onContentReady event fired for the element 'contentContainer'. That element and all of its children are present in the DOM.");

//assign onAvailable handler:
YAHOO.util.Event.onAvailable("contentContainer", this.fnHandler, "The onAvailable event fired on the element 'contentContainer'. That element is present in the DOM.");

},

沒有留言: