View Full Version : addLoadEvent - Trying to understand it.

Jan 18th, 2012, 05:39 AM
Hi all,

I've been working with the book "DOM Scripting: Web Design with JavaScript and the Document Object Model, Second Edition" It's available on the Safari ebooks library collection, which I get a subscription to through my school.

It seems like a really good book, but in chapter 7 they get to this function and don't really explain it much:

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

I understand the first part, where it stores window.onload into the variable oldonload, and then checks to see if window.onload is already handling a function. But I don't understand why it calls the variable oldonload(which then turns into a function with the (); right?) and then the func parameter somehow doesn't get overwritten.

If anyone could explain this or point me in the direction of an online article or instructional book that might explain it better, I would really appreciate it.

Logic Ali
Jan 18th, 2012, 07:06 AM
function addLoadEvent( func )
var oldonload = window.onload; /* Save the current onload handler... */

if (typeof window.onload != 'function') /* If there was no existing handler */
window.onload = func; /* assign the new handler to window.onload */
window.onload = function() /* Overwrite existing handler with a new handler, consisting of...*/
oldonload(); /* a call to the old saved handler plus... */
func(); /* a call to the new specified handler. */

Jan 18th, 2012, 09:04 AM
I might add that functions behave like regular variables with the exception that you can execute them by appending parentheses. funtions in JavaScript are so-called "first-class objects" (i.e. they have properties and you can do all things you can do with other objects as well).

Jan 19th, 2012, 02:11 AM
You can avoid the entire issue of needing to check if a handler already exists in order to update it to add the extra code by using event listeners/attachEvent instead of event handlers.

Jan 19th, 2012, 04:44 AM
Thank you for the quick and clear answers! I still have a lot to learn before I think I'll understand it completely. Do any of you have recommendations for good intro javascript books? This DOM Scripting book is really good, but it does leave out some explanations.

I guess I should have posted this in the DOM forum, I wasn't sure if this contained any DOM specific elements. But I guess window.onload is specific to the DOM, now that I've looked at it more thoroughly.

Jan 19th, 2012, 07:33 AM
though it seems like they belong to the DOM, the onevent properties actually predate it (therefore they are sometimes called DOM-0 events). DOM events are handled through event listeners ( EventTarget.addEventListener() )

Jan 19th, 2012, 09:21 AM
DOM events are handled through event listeners ( EventTarget.addEventListener() )

Event listeners have the advantage that you can attach as many listeners to the same event as you like whereas there is only the one event handler.

Old browsers that don't understand event handlers (or the IE equivalent attacheEvent) will also not allow you to use the code posted by the OP to update the handler as in those browsers that do not support listeners you cannot access the current handler to save it.

So there's never any reason to use such code as in those browsers where that code will work you can use event listeners (and attachEvent for IE8 and earlier) to do it properly using the real DOM.