JavaScript决定页面加载后执行预定功能的方法
更新时间：2016年5月17日14:59:55 作者：潜行者m
本文主要介绍JavaScript判断页面加载后执行预定函数的方法。 原理是利用监听器监听元素扰动javascript页面加载，并在触发时执行函数。 有需要的同学可以参考以下
JavaScript脚本语言的执行需要被触发。 一般的方法是直接在网页中编译几个函数，其中一些函数在代码加载时由浏览器处理，或者使用类似下面的代码来触发该函数相关功能的实现。
上面代码的意思是，当鼠标点击id为link的元素时，会触发其onclick事件，然后执行JavaScript中定义的fun函数。 这种做法肯定是不合理的，因为触发操作是直接写在HTML结构上，内容和行为没有分离，会给以后的二次开发或者修改带来不便。
需要注意的是，当风暴处理绑定到对应的元素时，只有在该元素加载后才会进行操作。 如果把处理后的脚本放在head区域，浏览器就会报错。 因为下面的HTML元素还没有加载，所以head中的处理脚本已经处理完毕。
执行 JavaScript 代码的一个好方法是将行为与内容分离，并在页面加载后对其进行处理。 因此，为了处理 JavaScript 代码，我们使用侦听器和窗口对象的加载事件。
听众
监听器的实际功能是将行为与内容分开。 以前需要在HTML中添加一些触发风暴来触发JavaScript相关的功能，而现在直接在JavaScript中使用某个元素的监听器来监听这个元素的风暴。 如果这个元素是由某个风暴触发的，在监听器中定义了这个风暴对应的处理函数，那么就会对这个函数进行处理。
W3C的标准方法称为addEventListener，IE9、chrome、firefox、opera都支持该方法，写法为：
window.addEventListener(‘load',function,false);
早期IE中的attachEvent方法也有类似的效果：
window.attachEvent(‘onload',function);
监听器的使用方式也很简单，就是先获取页面中的一个元素，然后在这个元素上使用监听器来定义监听风暴以及对应的风暴处理函数，如上例：
document.getElementById(‘link').addEventListener(‘click',fun,false);
有关使用显示器的更详细说明，请参阅文章末尾的补充信息。
window.onload 事件
onload 事件只有在整个页面完全加载时才会被触发。 我们将 JavaScript 代码写入 onload 事件中，以确保浏览器可以在加载 HTML 元素后处理我们的 JavaScript 代码。 基本写作：
window.onload = function(){
//code
}
这样，这个函数上面的代码就会在加载完成后进行处理。 不过这种方法有一个缺陷，就是只能用于这一项功能。 页面上不能出现多个window.onload事件。 如果有多个onload事件，前面的内容会覆盖后面的内容。
那么，我们可以这样做javascript页面加载，在一个window.onload事件中，写入所有需要加载的函数名，然后在外面定义该函数：
window.onload = function(){
func1();
func2();
}
function func1(){…}
function func2(){…}
这样做看起来是可以的，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来会很麻烦。 当然，一定有办法。 jQuery提供了非常强大的多脚本加载方法，所以必须有一种适合原生JavaScript的方法。
window.onload同时处理多个函数
我们需要编译一个处理函数，先看代码：
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();
};
}
}
}
简单分析一下，这个自定义的addLoadListener函数传递了一个函数名作为参数。 它首先判断浏览器是否支持相关监听器。 如果支持监听器，则使用监听器监听window对象的onload事件，然后处理这个函数。 该代码使用if语句来判断所有浏览器的窃听事件，并且是跨浏览器兼容的。
我们把这段代码放在JavaScript代码段的最上面，然后在下面定义相关的函数，然后用下面的语句来加载JavaScript函数。
addLoadListener(func);
function func() {…}
这样，页面加载后需要处理哪些JavaScript函数，就可以直接使用addLoadListener函数，而且可以多个使用。 一般来说，所有 JavaScript 最好使用 onload 事件加载，以防止发生意外。
