Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Wisconsin
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    addLoadEvent - Trying to understand it.

    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:

    Code:
    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.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    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. */
        }
      }
    }

  • Users who have thanked Logic Ali for this post:

    squarefighter (01-19-2012)

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,389
    Thanks
    13
    Thanked 353 Times in 349 Posts
    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).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Wisconsin
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,389
    Thanks
    13
    Thanked 353 Times in 349 Posts
    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() )
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Dormilich View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •