使用原生js拼凑html,浅谈使用原生JS在页面加载完成之后处理多个函数

网页中，一般使用JavaScript脚本的运行需要通过事件来触发。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能：

当鼠标点击id为link的元素的时候，就触发了它的onclick事件，然后执行使用了JavaScript定义的fun函数，这样的做法肯定是不合理的，因为触发操作直接写到了HTML结构里，内容和行为没有隔离开。

此外，当事件处理与对应元素绑定在一起的时候，只有那个元素在加载完之后才能进行操作。如果说把处理的脚本放在了head区域，在元素还没有加载完成的时候，浏览器就会报错，head中的处理部分HTML元素的脚本已经被执行了。

JavaScript正确的使用方法应该是脚本与HTML元素分离、当页面加载完成的时候再去执行，本文就来讲解如何使用原生JavaScript来实现。

使用监听器让脚本与HTML元素分离

监听器实际上的功能是使行为和内容进行分离的。以前需要在HTML中加上一些事件来触发JavaScript的相关函数，而现在直接在JavaScript中对某个元素使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。

W3C的标准方法是addEventListener，被IE9，chrome，firefox，opera所支持，用法：

window.addEventListener('load','function',false)

早期IE中有attach方法效果类似(做ie兼用)：

window.attachEvent('onload',function)

上面这两个监听器的作用：监听window对象，如果window对象的load(加载完成)事件被触发，那么就执行function这个函数。使用监听器的方法很简单，就是先获取页面中的某个元素，然后对这个元素使用监听器，定义监听的事件和对应的事件处理函数，例如：

document.getElementById('link').addEventListener('click',fun,false)

window.onload事件

onload事件只有在整个页面已经完全 载入的时候才会被触发，将JavaScript代码写进onload事件中，就可以保证在HTML元素被加载完成之后，浏览器才会处理我们的JavaScript代码，例如：

window.onload = function(){

//code

}

这样，这个函数里面的code会在函数成功加载完成之后被处理。这个方法的缺陷是只能作用一个函数。页面中无法出现多个window.onload事件，如果出现了多个onload事件，那么后面的内容会覆盖掉前面的。

那么，可以在一个window.onload事件中，写上所有需要加载的函数名，然后在外面定义函数：

window.onload = function(){

func1()

func2()

}

function func1(){}

function func2(){}

这样做虽然可以解决在网页内容加载完成之后执行响应的JavaScript代码，虽然很不方便，因为我们要把所有需要加载的函数名都写进去，修改起来就会很麻烦。

结合监听器和window.onload实现页面加载完处理多个函数

这里需要提到监视器一个优势：可以为一个元素上的同一个事件添加或者去除多个处理函数。前面说过window.onload事件加载的缺陷是只能在页面使用一次。而使用监听器的方法，就可以监听为window.onload的多个函数，例如：

function addLoadListener(fn){

if(typeof window.addEventListener != 'undefined'){

window.addEventListener('load',fn,false)

}else if(typeof document.addEventListener){

document.addEventListener('load',fn,false)

}else if(typeof window.attachEvent != 'undefined'){

window.attachEvent('load',fn)

}else{

var oldfn = window.onload

if(typeof window.onload != 'function'){

window.onload = fn

}else{

window.onload = function(){

oldfn()

fn()

}

}

}

}

这个函数使用if语句判断了浏览器对监听器的支持情况并且分别做了处理。如果不支持监听器，那么就使用默认的window.onload方法加载。这个函数的使用方法也比较简单，把它放在JavaScript最顶部，然后在下面编写功能函数，如果需要将某个功能函数使用这个方法加载，就可以把函数名作为参数调用这个自定义的addLoadListener。代码如下：

addListener(func)

function func(){}