12

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();
    }
  }
}
Improve this question
3
  • 1
    That's an old version of some code originally written by Simon Willison in 2004: simonwillison.net/2004/May/26/addLoadEvent Note that Simon updated the code in 2006 to deal with a potential problem on IE7 - you probably want to incorporate his update. Commented Jan 12, 2010 at 15:31
  • Thanks for your information NickFitz. I have checked it out. Commented Jan 12, 2010 at 15:38
  • Thanks all for your response and explanation. :) Commented Jan 12, 2010 at 15:43

4 Answers 4

Reset to default
17

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Can you correct me line by line in code? I don't master javascript well.
@Thank you very much, mkoryak. I just want to ensure "window.onload" on line 2. what are the possibilities for "window.onload"? because David Dorward said "It isn't an event. It is a property that might be a function or undefined". What do you think?
yes hes right. since in JS all functions are also variables / properties. If its not set, then it is undefined. if it is set, it can be a typeof function. we usually call it an 'onload event' but really its an onload function. semantics
window.onload can also be a string that will be evaluated when the event fires.
4

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.

Improve this answer

1 Comment

@David Dorward, Thanks so much for the line by line correction. You'are so kind. :)
1

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);
Improve this answer

1 Comment

@garcon1986 - You're welcome! Thanks for taking the time to say thank you :-)
1

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') {
Improve this answer

3 Comments

@thanks vicatcu. typeof return values are "number," "string," "boolean," "object," "function," and "undefined." So, window.onload has just two possibilites which are "function" and "undefined". Am'I right?
technically it can take on any of those values you mentioned, however any other values than "undefined" and "function" would likely be the result of a very silly programming error :).
I come here to change the saying: typeof return values "number", "string", "boolean", "object", "null" and "undefined". As Douglas Crokford said.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.