JavaScript-共享onload事件

        我们先看一下onload事件的定义，下面是w3school给的定义。

onload 事件

Event 对象

定义和用法

onload 事件会在页面或图像加载完成后立即发生。

语法

onload="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

image, layer, window

实例

在本例中，文本 "Page is loaded" 会被显示在状态栏中：

<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>

<body onload="load()">
</body>

</html>
 
      假如我们有两个函数firstFunction和secondFunction。如果让这两个函数都在页面加载时执行。这时该怎么办？如果还是一个一个绑定。
window.onload=firstFunction;
window.onload=secondFunction;
      如果这样写的话只有secondFunction函数被绑定。怎么解决呢？
      有一种方法可以避免。写一个匿名函数容纳这两个函数
window.onload=function(){
    firstFunction();
    secondFunction();
}
     如果绑定的函数不是太多，这样就可以解决问题。还有一种方法，代码虽然长一点，但是一旦写好，绑定函数非常简单。那就是addLoadEvent函数。
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }
    else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

    这个函数为页面加载完毕所需要执行的函数创建了一个队列，如果要将函数添加到队列里面。就可以调用这个函数就可以了。当绑定的函数数目很多时。只需要添加一行代码。
addLoadEvent(function);  这样就够了。
posted @ 2017-05-03 17:57  ll7  阅读(249)  评论(0)  编辑  收藏  举报