JavaScript to judge a page after loading and then perform the scheduled function of the technique _javascript skills

The execution of the JavaScript scripting language needs to be triggered. The general practice is to write several functions directly in the Web page, some of which are processed by the browser when the code is loaded, or use code similar to the following to trigger the function.

<div id= "link" onclick= "Fun ()" ></div>

The code above means that when the mouse clicks on the element with the ID link, it triggers its OnClick event and executes the fun function defined using JavaScript. Such a practice is certainly very unreasonable, because the trigger operation directly into the HTML structure, content and behavior is not isolated, to the future two of development or modification inconvenience.
It should be noted that when event handling is bound to the corresponding element, it can only be performed after that element has been loaded. If you put the processed script in the head area, the browser will give an error. Because the following HTML element has not yet been loaded, the processing script in the head has been processed.

A good way to execute JavaScript code should be that the behavior content is separated and processed after the page is loaded. So, we use the Load event for the Listener and window objects to handle the JavaScript code.

Listener

The actual function of the listener is to separate the behavior from the content. The previous need to add some triggering events to the HTML to trigger the relevant functions of JavaScript, and now directly in JavaScript to the use of an element listener, listening to this element of the event, if this element is triggered some events, The handler for this event is defined in the listener, and the function is processed.

The standard method of the consortium is called AddEventListener, supported by the Ie9,chrome,firefox,opera, and written:

Window.addeventlistener (' Load ', function,false);

The Attachevent method in early IE has the same effect:

Window.attachevent (' onload ', function);

The method of using the listener is also very simple, that is, to get an element of the page first, and then use the listener for the element, define the listening event and corresponding event handler function, for the above example:

document.getElementById (' link '). AddEventListener (' click ', Fun,false);

For more detailed instructions on how to use the listener, please see supplementary information at the end of the article.
window.onload Events

The onload event is triggered only when the entire page is fully loaded, and we write JavaScript code into the OnLoad event to ensure that the browser does not process our JavaScript code until the HTML element is loaded. The basis of the wording:

Window.onload = function () {
 //code
}

In this way, the code inside this function is processed after the load is completed. However, there is a flaw in this approach that can only be used for this function. Multiple Window.onload events cannot occur on a page, and if more than one OnLoad event occurs, the following will overwrite the previous one.
So, we can do this, in a window.onload event, write all the function names that need to be loaded, and then define the function outside:

Window.onload = function () {
  func1 ();
  Func2 ();
 }
function func1 () {...}
function Func2 () {...}

This can be done, but inconvenient, because we need to write all the function names to be loaded, it will be cumbersome to modify. Of course, there must be some, and JQuery provides a very powerful method of multiple script loading, so native JavaScript certainly has a way.

Window.onload handle multiple functions at the same time

We need to write a handler function to look at the code first:

  function Addloadlistener (FN) {
    if (typeof window.addeventlistener!= ' undefined ') {
      window.addeventlistener (' Load ', fn,false);
    } else if (typeof document.addeventlistener!= ' undefined ') {
      document.addeventlistener (' Load ', fn,false);
    } else if (typeof window.attachevent!= ' undefined ') {
      window.attachevent (' onload ', FN);
    } else{
      var oldfn = window.onload;
      if (typeof window.onload!= ' function ') {
        window.onload = fn;
      } else{
        window.onload = function () {
          oldfn ();
          fn ();
        };}}
  

Simple to parse, this custom Addloadlistener function, passing a function name as an argument. It first determines whether the browser supports related listeners and, if the listener is supported, uses the listener to listen for the OnLoad event of the Window object and then process the function. This code uses the IF statement to determine the listener events for all browsers and is cross-browser compatible.
We put this code at the top of the JavaScript snippet, then define the relevant function below, and then use the following statement to load the JavaScript function.

Addloadlistener (func);
function func () {...}

This way, there are JavaScript functions that need to be processed after the page is loaded, directly using the Addloadlistener function, and can be used more than one. Generally, all JavaScript is best used to load onload events to avoid unexpected occurrences.