Multi onload/onunload in a single file

[DJCMBear]

The amount of new coders trying to use more than one onload / onunload in a single file is very high due to them not knowing the in and outs of javascript, so here is a function to allow more than one onload / onunload per page.


var addEvent = function(type,func) {
var oldonload = window.onload,
oldonunload = window.onunload;
if(type == "onload") {
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
};
}
} else if(type == "unload") {
if(typeof window.onunload != 'function') {
window.onunload = func;
} else {
window.onunload = function() {
oldonunload();
func();
};
}
}
return this;
};


The usage of this is simple.

/**
* Just like any normal window.onload there is a
* function but as this is a function you don't need
* to use any equals sign '=' so heres some examples
*/

// Onload
addEvent('onload',function(){alert('Hello World');});
var secondFunc1 = function(){alert('Hello World Again');};
addEvent('onload',secondFunc1);

// Unload
addEvent('unload',function(){alert('Hello World [unload]');});
var secondFunc2 = function(){alert('Hello World Again [unload]');};
addEvent('unload',secondFunc2);

// Stringing example
addEvent('onload',function(){alert('Hello World [string]');}).addEvent('onload',function(){alert('Hello World Again [string]');});

[rnd me]

this is a very fragile solution because if someone sets window.onload directly, like you mention they like to do, all of your load events get wiped out!

the regular addEvent should handle multiple onloads just fine, and they will still fire no matter what someone does to window.onload.

also, don't circulate functions with the same names as popular existing functions, unless they provide the same functionality. This is a version of addEvent with only two events and no modern dom binding. it's quite long as well.


here is the one i use: it can handle many onloads, as well as every other type of event, and it's much smaller than the code posted:

function addEvent( obj, type, fn ) {
var ename= type.replace(/^on/i,"");
var resp = obj.attachEvent ?
obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )} ) :
obj.addEventListener(ename, fn, false );
if(!resp){ obj["on"+ename] = fn; }
return obj;
}

[Philip M]

Is there anything wrong with

<script type="text/javascript">
window.onload = function() {
functionOne();
functionTwo();
functionThree();
}
</script>

[DJCMBear]

No lol but some developers like to keep it clean and tidey without having loads of functions inside on onload like that, it's just a small function I put together if anyone wanted to use it.

[rnd me]

Is there anything wrong with

<script type="text/javascript">
window.onload = function() {
functionOne();
functionTwo();
functionThree();
}
</script>
i don't believe in right and wrong when it come to programming but that pattern might be hard to maintain if using lots of external scripts. if an external script wanted to do something at page load, it would have to be noted in that one, hard-coded onload function.

Using addEvent, the module can create it's own unobtrusive onload event.
This lets modules dispatch dependencies without additional configuration.
All this can enable more autonomous modules, and thus lower maintenance.


that said, window.onload takes a long time to fire. onload waits for all the images, sometimes that takes a while!
for better page performance you can usually start doing things a lot earlier: domReady is preferable.