How the onload event in JavaScript binds multiple methods

Source: Internet
Author: User

The event is triggered when the page has finished loading onload . Based on the idea that content (HTML) is separated from behavior (JavaScript), we need to write some initialization of the page in the method and window.onload = functionName call these methods.
When multiple methods need to be called, window.onload = functionA; window.onload = functionB; only the last method is actually called if used. So how do you implement calling multiple methods?

  1. Write directly in HTML:

    <onload= "Functiona (); Functionb ()">

    This method is not recommended because the event is contained within the HTML and does not conform to the "content and behavior separation" concept described above.

  2. Create an anonymous function that holds the method that needs to be called, and then bind the anonymous function to the onload event:

    function () {  Functiona ();  Functionb ();}

    This is the simplest solution when there are not too many functions that need to be called.

  3. When there are many methods to invoke, we can further refine and write a method specifically for binding onload events:

    functionAddloadevent (func) {//depositing the value of an existing Window.onload event handler function into a variable    varOldonload =window.onload; if(typeofWindow.onload! = "function") {      //if the handler has not yet bound any functions, add new functions as usualWindow.onload =func; } Else {      //if the handler has already bound some functions, add the new function to the endWindow.onload =function() {oldonload ();      Func (); }    }  }    //Next, we just need to call this method to add the function we need .addloadevent (Functiona); Addloadevent (FUNCTIONB);

    Now, no matter how complicated the code becomes, when we need to call the number of functions when the page is loaded, we just need to write a single statement to resolve it.

Reference:

    • JavaScript DOM Programming Art (second edition)
    • Simon Willison ' s blog

How the onload event in JavaScript binds multiple methods

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.