Confusion about window.onload in javascript

Question

I have one paragraph of javascript code. And i don't understand it very well. Can you expain it line by line for me? Thanks a lot.

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

And here is what i'm thinking:

 function addLoadEvent(func) { //define a function with a parameter 'func'
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function') { //if window.onload is not a function, then...
    window.onload = func; //assign 'func' to window.onload event. what does func mean?
  } else {             //if window.onlad is a function
    window.onload = function() {  //don't understand
      oldonload();  //call function oldonload()
      func();       //call function func()
    }
  }
}

Confusions:

window.onload is already an event, and why do we use typeof?

function addLoadEvent(func) , window.onload = func, func(). What's the difference among these funcs?

I'm sorry for posting a novice problem. But thanks to anyone who gives me some guidance?

Edit:

This is improved original code by Simon Willison.

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

Answer 1

Its very simple.

You check if there is already an onload function registered.

if there isnt one, 1. assign 'func' the function you pass in to the onload

if there is one, create a new onload function, that will:

1. call the old onload function
2. call your 'func' that you pass in

and:

window.onload is already an event, and why do we use typeof?

window.onload can be a function, but if one isnt set, it will be 'undefined' we need to check its type to see what it is.

function addLoadEvent(func) , window.onload = func, func(). What's the difference among these funcs?

functions are a variable in javascript. so you can refer to the function as

func

you can call it as

func()

in your case: function addLoadEvent(func) is the current function defintion. it takes one param, and that param should be a function

window.onload = func assigns the function you passed in to the onload event

func()

calls the function you passed in

here is the line by line correction:

function addLoadEvent(func) { //define a new function called addLoadEvent which takes in one param which should be function
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function') { //if window.onload is not a function,  and thus has never been defined before elsewhere
    window.onload = func; //assign 'func' to window.onload event. set the function you passed in as the onload function
  } else {             //if window.onlad is a function - thus already defined, we dont want to overwrite it so we will..
    window.onload = function() {  //define a new onload function that does the following:
      oldonload();  //do whatever the old onload function did
      func();       //and then do whatever your new passed in function does
    }
  }
}

//then call it like this: 
addLoadEvent(function() {
  alert("hi there");
});
addLoadEvent(function() {
  alert("this will be alerted after hi there");
});
//or like this:
var fn = function(){
 alert("this will be the last thing alerted");
};
addLoadEvent(fn);

Answer 2

Can you expain it line by line for me?

I'm too lazy, but the nutshell is:

• Copy onload to another variable
• If onload if a function, set it to a new function that runs the passed function then the old function
• If it isn't, just make the passed function run onload

window.onload = func; //assign 'func' to window.onload event. what does func mean?

func is the variable defined as the first argument to the function (function addLoadEvent(func)). Functions are first class objects in JavaScript — you can pass them around, just like any other variable.

window.onload is already an event, and why do we use typeof?

It isn't an event. It is a property that might be a function or undefined. The event is 'something that happens' which causes that function to be run.

function addLoadEvent(func) , window.onload = func, func(). What's the difference among these funcs?

The first defines a function named addLoadEvent. The second assigns a function named func to onload. The third calls a function named func.

As an aside, don't use this. Use addEventListener/attachEvent or a library that normalises them across browsers such as YUI or jQuery.