multiple onload events

[rozner]

Hi,

I've found this script searching this forum, just wondering if anyone's used it and knows if it's safe to use with all browsers? or if there's a better solution to the problem of having multiple onloads.

<!--
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent();
addLoadEvent(function() {
  /* more code to run on page load */ 
});
//-->

[Raffles]

There is a better solution, to use the more modern addEventListener method (and Microsoft's inferior version of it, attachEvent). This is the most famous one, addEvent: http://www.scottandrew.com/weblog/articles/cbs-events
Since then, lots of variations and improvements/optimisations have appeared, there was even a contest held: http://www.quirksmode.org/blog/archi...nt_recodi.html
The same man who held the contest has something to say about the problem with assuming addEventListener and attachEvent are the same thing: http://www.quirksmode.org/blog/archi...nt_consid.html

[rozner]

thanks for the reply. I had a look at the links, but I actually came up with something myself which seems to work and also seems a lot simpler. Please give me your opinion on this, is it a good idea, can something go horribly wrong with this?

/*
  We'll override the default onload event, this should not be done anywhere else in the site otherwise
   it will break the whole system.
*/
window.onload = function() {
 
    for (f in onloadFunctions) {
        eval(onloadFunctions[f]+'()');
    }
}
 
/*
  We'll keep an array of function names here. These are the actual functions to be called when the page finishes
  loading. Other pages will add their own functions to this array.
*/
var onloadFunctions = new Array();
var functionCount = 0;
 
function addOnloadFunction(functionName) {
    onloadFunctions[functionCount++] = functionName;
}

Then whenever I want an onload, here's an example:

function initializeSignupForm() {
// code here
}
addOnloadFunction('initializeSignupForm');

Thanks

[Raffles]

Well, that is the same principle as addEvent, used in the first link I provided, but your version is messier because it's not all wrapped up in a single closure (a single function) and because you use global variables instead of one single function. But most of all it's bad because you use eval(), which you should only use when there is absolutely no other way around it. Also, onloadFunctions is an array so you shouldn't be using a for...in loop for it, but a for loop. For...in loops should be used with object literals. I would not use your code but instead use addEvent (or perhaps Simon Willison's, which makes it work in IE5/Mac as well) in the first link I posted.

[rozner]

ok I'll take another look at that link, I hadn't really needed it until today and in a bit of a rush but I should have some more time tomorrow to read through the link properly. Regarding the use of 'eval', can you give me some reasons why it should be avoided? does it cause problems in different browsers or is it a performance issue? I ask because I do occasionally use it, not often, but from time to time it can be very useful.

[Raffles]

Performance issue as well as security issue. More than anything, it's just unnecessary. Have a look at this: http://24ways.org/2005/dont-be-eval