...

View Full Version : addLoadEvent - Trying to understand it.



squarefighter
01-18-2012, 04: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() {
oldonload();
func();
}
}
}

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
01-18-2012, 06: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 */
}
else
{
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. */
}
}
}

Dormilich
01-18-2012, 08: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).

felgall
01-19-2012, 01: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.

squarefighter
01-19-2012, 03: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.

Dormilich
01-19-2012, 06: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() )

felgall
01-19-2012, 08: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum