multiple unobstrusive functions onload

[dugawug]

Hi there,
I've been trying out unobtrusive javascript techniques lately. I've been reading Jeremy Keith's DOM Scripting and AJAX books and I have one question about how this all gets started.

I read him saying to assign a function to the window.onload event and then use that function to assign certain element's events to functions . Like:

window.onload = myFunction;
function myFunction() {
var theButton = document.getElementById("myButton");
theButton.onclick = function() {
doSomething();
return false;
}
}

Which is all fine and great. But then he says you'll usually want to execute more than one function on page load, and he gives this crazy function to add more functions onto the onload event.

But what i've done is simply called one function for window.onload and within that function have i created all other functions. This seems simple enough to me. Almost too simple, if someone really experienced here didn't think to do it. Is there some drawback to my method that i just can't see as of yet?

Thanks!

[abduraooft]

window.onload=function(){
myFunction1();
myfunction2();
....
}

[rnd me]

if the crazy function is called addEvent, it's not crazy at all.

let's say you had more than two or three things to be done on onload.
also assume your app has grown and you now have three external script files in use in your page.

to add a task to be done upon onload, i have to open the specific file with the one event, find the onload block and modify the existing code.

using something like addEvent, i can add tasks to be done upon load from any file, script tag, or even in the middle of another function.

the drawback to your approach is its rigidness. for small/simple pages though there is no reason it won't work as expected.

[dugawug]

Originally Posted by rnd me

if the crazy function is called addEvent, it's not crazy at all.

it's not that function. i'll have to find it, it's in J Keith's Bulletproof Ajax, but it's a fairly large function written out that somehow allows you to tack on more than one function onload. but what's the problem with calling one function that contains many others? ridigness was mentioned, though i don't fully understand how, but i'll look more into using addEvent.

let me explain a bit about what my large encompassing function executed onload does, at least partially:

1. loop over all tags and find any given specific classes and assign functionality to them. for example, i set a class of "clearText" on certain HTML elements which does nothing but gives me a hook that i can assign a function to which will take default text in a form field (like "Enter search terms") and remove that (value='') onclick. having the class eliminates me from having to identify each of these form fields by specific id, but the downside is i have to search all tags on every page to hunt for one that may exist.

2. form validation for various forms throughout the site. unfortunately, the script won't limit itself to a particular form, but rather there is all the code for every form on the site, which right now luckily isn't too many.

3. so on and so forth.

i guess my main concern more down the road will be having to execute this whole function for every page as the file size is growing. i think it's still 12KB uncompressed, but it will get bigger. so right now, all the js functions for my site are in one function that gets loaded every time. i do check for objects before running blocks of code, but i would guess this doesn't help in terms of time spent parsing the file. does code wrapped around a conditional that fails get parsed? (ex. if this form's ID is found on this page, execute this). a basic question i should know
or is the main problem with a large file just the fact that the whole thing has to be downloaded from the server regardless of whether it all gets parsed or not?

Originally Posted by rnd me

using something like addEvent, i can add tasks to be done upon load from any file, script tag, or even in the middle of another function.

can you explain more of using addEvent?

i guess in sum, the only improvement i can see for me would be somehow to only call the functions a particular page needs out of my currently container function that is called onload. but no idea how to do this. the good news is my script works fine, and i've gotten it very small with lots of reused code, but just curious how to make it better.

can someone else state how they handle this? you have "unobtrusive" js functions called onload, yet you only want to call the relevant functions per page. i guess i should do some more online research, too.

[abduraooft]

can you explain more of using addEvent?

See http://www.quirksmode.org/js/events_advanced.html

[rnd me]

Originally Posted by dugawug

does code wrapped around a conditional that fails get parsed? (ex. if this form's ID is found on this page, execute this). a basic question i should know
or is the main problem with a large file just the fact that the whole thing has to be downloaded from the server regardless of whether it all gets parsed or not?

all code gets parsed before it can be executed. the only way to stop this is by hiding it in a string, which can be eval'd later.

that said, parsing is very quick. whole libraries like jquery, prototype, etc all parse in under 50ms on modest machines.


the type of branching you mention will prevent execution of your code, which is much slower.

javascript files can be cached, so the user really only had to download the whole thing once.

parsing a big script from cache has virtually no perceivable overhead compared to not loading the script at all.