www.webdeveloper.com
Results 1 to 8 of 8

Thread: Noob - learning event handling with window.onload

Hybrid View

  1. #1
    Join Date
    May 2010
    Posts
    6

    Question Noob - learning event handling with window.onload

    Hello, learning javascript.
    This code is supposed to handle different functions when the window onloads.

    In the code initOne, initTwo and initThree are functions.

    :Questions:
    Don't really see how window.onload can store functions?
    It seems to be more of an event.
    And if it is an event, why is it that the functions stored in the oldOnload variable are not executed the scond time the addOnLoad function is called in line 2?

    Also, how can oldOnload be a conditional if it only seems to be an array of functions? ---->*if (oldOnload) {}


    Code:
    addOnLoad(initOne);
    addOnLoad(initTwo);
    addOnLoad(initThree);
    
    function addOnLoad(newFunction){
    	var oldOnload = window.onload;
    	
    	if(typeof oldOnload =="function"){
    		window.onload = function() {
    			if (oldOnload) {
    				oldOnload();
    				}
    				newFunction();
    			}
    		}
    		else{
    			window.onload = newFunction;
    			}
    	}

  2. #2
    Join Date
    May 2010
    Posts
    51
    Why not use windowaddEventListener('load' ...

    http://www.quirksmode.org/js/events_advanced.html

  3. #3
    Join Date
    May 2010
    Posts
    6

    Learning

    Thanks for the info, I'll probably use your method in the future.
    For now, i'm trying to understand the tutorials code to learn javascript.
    Thanks!

  4. #4
    Join Date
    May 2010
    Posts
    6

    also...

    also, I'm wondering if windowaddEventListener(load... is compatible with most browsers? (haven't read the http://www.quirksmode.org/js/events_advanced.html info yet...)

  5. #5
    Join Date
    May 2010
    Posts
    51
    ok I just read that quirksmode. the traditional way is window.onload= ...
    I guess if you need more than one onload function than try this:

    Code:
    function onWinload(){
       this.functions=new Array();
       this.attachEvent=function(f){
           this.functions[this.functions.length]=f;
       }
       this.eventTriggered(){
           var i = 0;
           while(i<winLoader.functions.length){winLoader.functions[i]();i++}
       }
    }
    
    var winLoader=new onWinLoad(); // declare globally because trigger window load event
       // changes the this contect. there are other ways but can't be bothered to look it up now
    window.onload=winLoader.eventTriggered
    winLoader.attachEvent(firstFunctionForOnload);
    winLoader.attachEvent(secondFunctionForOnload);

  6. #6
    Join Date
    May 2010
    Posts
    6

    going somewhere

    seems interesting and yeah i think it works.

    not to sure whats happening here. Still don't know enough js.
    think you could comment please.

    Code:
       this.functions=new Array();
       this.attachEvent=function(f){
           this.functions[this.functions.length]=f;
       }
    thanks!

  7. #7
    Join Date
    Feb 2010
    Posts
    49

    I think this is what's happening

    Code:
    this.functions=new Array();
    This makes a new array in preparation for storing functions


    Code:
       
    this.attachEvent=function(f){
           this.functions[this.functions.length]=f;
       }
    This makes a method for this that appends function f onto the bottom of the array if they don't want to do something like

    this.functions.push(f);

    Then they can use the array of functions for something.

  8. #8
    Join Date
    May 2010
    Posts
    51
    onWinload is the object defenition to store all the functions in that will get called on windows load. And call them when the event is triggered
    onWinload.attachEvent will add a function to the list of functions to be called
    onWinload.eventTriggered will be called by the onload event of the window and in turn will call all the functions that have been added with the onWinload.attachEvent function.

    winLoader is an instance of the onWinload object. More on objects:
    http://www.javascriptkit.com/javatutors/oopjs2.shtml

    You actually need only one instance so you can declare winLoader also like this:

    Code:
    var winLoader {
       functions: new Array(),
       attachEvent: function(f){
           this.functions[this.functions.length]=f;
       },
       eventTriggered: function(){
           var i = 0;
           while(i<winLoader.functions.length){winLoader.functions[i]();i++}
       }
    } // global var, means you cannot declare this within a function it has to be available for all script in the document
    window.onload=winLoader.eventTriggered; // attach winLoader.eventTriggered to the window.onload event (this function will be called when the window loads)
    winLoader.attachEvent(firstFunctionForOnload);// add functions you want the winLoader to call when the window loads
    winLoader.attachEvent(secondFunctionForOnload);// add another function
    Last edited by amsterdamharu; 05-23-2010 at 02:19 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles