Question

What is the best way to handle several different onload scripts spread across many pages?

For example, I have 50 different pages, and on each page I want to set a different button click handler when the dom is ready.

Is it best to set onclicks like this on each individual page,

 <a id='link1' href='#' onclick='myFunc()' /> 

Or a very long document ready function in an external js file,

 Element.observe(window, 'load', function() {   if ($('link1')) {     // set click handler   }   if ($('link2')) {    // set click hanlder   }   ... } 

Or split each if ($('link')) {} section into script tags and place them on appropriate pages,

Or lastly, split each if ($('link')) {} section into its own separate js file and load appropriately per page?

Solution 1 seems like the least elegant and is relatively obtrusive, solution 2 will lead to a very lengthy load function, solution 3 is less obtrusive then 1 but still not great, and solution 4 will load require the user to download a separate js file per page he visits.

Are any of these best (or worst) or is there a solution 5 I’m not thinking of?

Edit: I am asking about the design pattern, not which onload function is the proper one to use.

Answer 1

Have you thought about making a class for each type of behavior you’d like to attach to an element? That way you could reuse functionality between pages, just in case there was overlap.

For example, let’s say that on some of the pages you want to a have button that pops up some extra information on the page. Your html could look like this:

<a href='#' class='more-info'>More info</a> 

And your JavaScript could look like this:

jQuery('.more-info').click(function() { ... }); 

If you stuck to some kind of convention, you could also add multiple classes to a link and have it do a few different things if you needed (since jQuery will let you stack event handlers on an element).

Basically, you’re focusing on the behaviors for each type of element you’re attaching JavaScript to, rather than picking out specific ids of elements to attach functionality to.

I’d also suggest putting all of the JavaScript into one common file or a limited number of common files. The main reason being that, after the first page load, the JavaScript would be cached and won’t need to load on each page. Another reason is that it would encourage you do develop common behaviors for buttons that are available throughout the site.

In any case, I would discourage attaching the onlick directly in the html (option #1). It’s obtrusive and limits the flexibility you have with your JavaScript.

Edit: I didn’t realize Diodeus had posted a very similar answer (which I agree with).