DomReady

MooTools comes with a custom event that fires when the DOM is ready to be manipulated.

You often use window.onload or body onload=”” to start preforming events as soon as the page is loaded.

window.onload = myFunction;

There are down sides to that method. First of all, you have to wait for all images. Next, what if you had a few scripts that had some code tied to window.onload? They would overwrite each other. There are other solutions, which copy the old function from window.onload and add it plus the scripts function back, yet that isn't exactly elegant.

As mentioned, MooTools comes with a custom event that fires as soon as the DOM is ready. It is called DomReady.

window.addEvent('domready', function(){
  myFunction();
});

That code will fire the myFunction as soon as all of the HTML DOM is loaded but before images, other videos and other things are loaded at all.

MooTools DomReady is used with Javascript you'll ever write.

Let's discuss DomReady.

• Allows you to work with the page sooner then onload.
• Allows you to use the same event with many scripts.
• No waiting for Images.
• Again, Looks Pretty.

The MooTools DomReady event is similar to jQuery ready's event. (If there is a equivalent event in a different library, please add it.)

/*
  MooTools DomReady.
  Two Styles.
  1. Call the function directly.
  2. The function is inside of anonomos function.
*/
window.addEvent('domready', myFunction);
 
  //Or.
 
window.addEvent('domready', function(){
  myFunction();
});
 
function myFunction() {
  alert("The DOM is ready.");
}

This is important in MooTools. It's used in just about every script that will ever interact with the DOM. If you want to see an example of how useful this feature is, simply look at the MooTools Demos. And in particular, DomReady vs Load.

Continue to The Dollar Function