The execution of the JavaScript scripting language needs to be triggered. The general approach is to write several functions directly on the web page. Some of them are processed by the browser when the code is loaded, or use codes similar to the following to trigger the implementation of the functions related to the function.
<div id=”link” onclick=”fun()” ></div>
The above code means that when the mouse clicks on an element with id as link, its onclick event is triggered, and then the fun function defined using JavaScript is executed. This approach is definitely unreasonable, because the trigger operation is directly written into the HTML structure, and the content and behavior are not isolated, which will cause inconvenience to future secondary development or modifications.
It should be noted that when event processing is bound to the corresponding element, operations can only be performed after that element is loaded. If the processed script is placed in the head area, the browser will report an error. Because the following HTML element has not been loaded yet, the processing script in the head has been processed.
A good way to execute JavaScript code should be to separate behavioral content and process it after page loading. Therefore, when dealing with JavaScript code, we need to use the load events of listeners and window objects.
Listener
The actual function of the listener is to separate behavior from content. In the past, some triggering events were needed to trigger JavaScript related functions. Now, we directly use a listener for an element in JavaScript to listen for events of this element. If this element is triggered and the corresponding processing function for this event is defined in the listener, then this function will be processed.
The standard method of W3C is called addEventListener, which is supported by IE9, chrome, firefox, and opera. The writing method is:
window.addEventListener('load',function,false);The attachedEvent method in early IE has similar effects:
window.attachEvent('onload',function);The method of using a listener is also very simple. It is to first obtain an element in the page, and then use a listener for this element to define the listened event and the corresponding event handling function. For example above:
document.getElementById('link').addEventListener('click',fun,false);For more detailed instructions on using the monitor, please see the supplementary information at the end of the article.
window.onload event
The onload event will only be triggered when the entire page has been fully loaded. When we write the JavaScript code into the onload event, we can ensure that the browser will process our JavaScript code after the HTML element is loaded. Basic writing:
window.onload = function(){ //code}In this way, the code in this function will be processed after loading. However, this method has a drawback, which is that it can only be used for this function. Multiple window.onload events cannot appear on the page. If multiple onload events occur, the subsequent content will overwrite the previous one.
Then, we can do this, write all the function names that need to be loaded in a window.onload event, and then define the function outside:
window.onload = function(){ func1(); func2(); }function func1(){…}function func2(){…}Although this is OK, it is very inconvenient because we need to write all the function names to be loaded, and it will be very troublesome to modify. Of course, there must be a solution. jQuery provides a very powerful multi-script loading method, so there must be a solution for native JavaScript.
window.onload handles multiple functions simultaneously
We need to write a processing function and 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(); }; } } }Let's simply parse this custom addLoadListener function, passing a function name as a parameter. It first determines whether the browser supports the relevant listener. If it supports the listener, it uses the listener to listen onload events of the window object, and then handles this function. This code uses the if statement to judge all browsers' listening events and is cross-browser compatible.
We put this code at the top of the JavaScript code segment, then define the relevant functions below, and then use the following statement to load the JavaScript function.
addLoadListener(func);function func() {…}In this way, any JavaScript functions need to be processed after the page is loaded. You can use the addLoadListener function directly, and multiple functions can be used. Generally speaking, it is best to load all JavaScript using the onload event to avoid unexpected situations.