DomReady Event Methods in JavaScript Frameworks
The “domready” event, as it is affectionately known as, is one of the best things since sliced bread. The domready event says “screw you window.load … I don’t have time to wait for you.” The ability to execute your JavaScript method on DOM nodes before the page loads helps to make our effects and element modifications that much more seamless. Every JavaScript framework has their own method of domready so I wanted to take the time to list off each one, just in case you (or I) need to work with a framework that’s (initially) outside of our comfort zone.
MooTools (FTW)
window.addEvent('domready',function() {
//do stuff
});
jQuery
jQuery(document).ready(function() {
//do stuff
})
Dojo Toolkit
dojo.addOnLoad(function() {
//do stuff
});
YUI
YUI().use('*',function(Y) {
Y.on("domready", function() {
//do stuff
}, Y, "The DOMContentLoaded event fired. The DOM is now safe to modify via script.");
});
Prototype
document.observe("dom:loaded", function() {
//do stuff
});
Sencha JS
Ext.onReady(function() {
//do stuff
});
Be sure to let me know if I’m missing a framework — I’d like this list to become as comprehensive as possible!
Follow Me!
Full David Walsh Blog Post:
Related posts:
View full post on David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else
No related posts.
Loading ...
ExtJs still remains Extjs, Sencha is the company name…
(«One of the benefits of the name change is also that it separates a product name – Ext JS – from the company name, Sencha», http://www.sencha.com/blog/2010/06/14/ext-js-jqtouch-raphael-sencha/ )
But everyone should still prefer Mootools
Im not a programmer, but it seems to me that the mootools makes the most sense. You are adding an event listener to the window to see when the DOM is ready.
Could just be that I like my event listeners.
I like the Mootools way the most(Prototype doesn’t look bad either, just a little more complicated). Almost all other frameworks have a separate method for adding domready, which I find weird, since isn’t really different at all compared to regular events. It’s not a big deal but for beginners it might be easier to remember the event name of domready than the whole method for just that one task.
I wonder what makes jQuery so popular? Is it the syntax? I’ve used Mootools for so long that everything else looks like clumsy when compared to it.
Wow, is everything in YUI so verbose and convoluted? I’ve not really explored it–this example is solidifying that for the conceivable future.
jQuery has an alternative/shorter ondomready:
$(function(){
//do stuff
});
I prefer the mootools approach myself. And I agree, the YUI code looks way too verbose, if the rest of the framework’s API translates to code like that then there’s reason in itself to avoid it.
Mootools code has a tendency of looking cleaner in general to me (prototype is similar but it has very wordy method names), which I think is largely due to the fact it takes the approach of prototyping and extending native objects.
@Jani Peltoniemi
I damn (totally^totally*+∞)>100% agree with you! Mootools syntax rocks so much that I don’t even dare to imagine myself using any other!
@Allen
YUI is the main reason I have delayed the creation of my first vBulletin4/Mootools style (template). Not only its syntax, pardon me, sucks, but it conflicts with other js frameworks. BTW, If I need to use a framework, I shall use only one. The one that is synonymous of FTW!!!