Confusion about window.onload in javascript

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();
    }
  }
}

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);

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.

The defined function addLoadEvent(func) is designed to add an additional function to the already existing window.onLoad event. So, the first thing it does is check to see if the window.onLoad event is not a function. If not, it simply assigns the passed in function to the window.onLoad event.

If however, the window.onload is already defined, it resets it to call the original onload function as well as the function that you passed in (func).

You would use it like so to add your own event to the "stack":

addLoadEvent(function() {
  alert('Hello! I run after the original window.onload event if it exists!');
});

This passes an anonymous function to the addLoadEvent function. This is what is happening in the window.onload = function() { ... } in your code above. You could also define the function beforehand and pass it in like so:

var myOnloadEvent = function() {
  alert('Hello! I run after the original window.onload event if it exists!');
};

addLoadEvent(myOnloadEvent);

In javascript a "function" is a primitive variable type that a variable can take on. Javascript is also loosely typed, so a variable's value depends on the last thing that was assigned to it. "event" is just a member variable of the window object. As such you can assign it to whatever you like. If it has never been assigned to anything it will take on the primitive value of "undefined" in javascipt. So the check for:

if (typeof window.onload != 'function') {

is realy checking to see whether or not the window.onload event handler has been defined yet or not.

If it has not been defined yet, then this function is assigning func to the window.onload event handler (i.e func will be called when the window loads).

If it has been defined previously, then this function will create a new function that calls the existing onload handler followed by func when the window loads. This example is also using a property/language-feature of javascript called 'closure' so that the newly defined 'compose' function has access to the variables above its scope that persist after the outer function loses scope.

Perhaps a more meaningful check would be:

if (typeof window.onload === 'undefined') {