window.onload的一些说明

window.onload事件对于初学者来说,经常会让我们感觉不好理解,并且经常会犯一些错误,初学js的时候经常碰到有关于它的问题,我想和我一样很多初学者也会碰到,那时候不懂它的具体作用,只要一写代码就用window.onload,基本写一个方法就用一次,往往在同一个页面里面会多次去使用它,那时候甚至以为它是方法的一部分,在写方法时必须要用到它,当然这是一个误区,下面是以前初学时的用法:

window.onload = function(){
    ......
}
window.onload = function(){
    ......
}

  

但是每次这么写完都会出问题,不是这个方法没执行,就是那个方法没起作用!

起初并不明白,这到底是为什么?后来经过多次实践发现:

每个页面只能使用一次window.onload,而且多次使用的话,只有最后一次绑定的方法可以执行!

这是什么原因了?我们应该怎么正确的使用它了?它的作用又是什么了?怎么给他绑定多个方法了?我想这些应该是很多初学者都会有的疑问!

下面我们就来好好的了解一下window.onload!

看这样一段代码:

<html>
<head>
<title>hello world</title>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    oBox.style.color = red;
</script>
</head>
<body>
    <div id="box">hello world!</div>
</body>
</html>

  

首先window.onload的作用是当页面加载完成后自动触发该事件,有时候我们会在网页头部加载或直接写js,这样在页面加载到js的时候,页面的body里的标签等都还没有加载到,而我们写js经常会获取页面的dom元素,如上例所示,在这种情况下,我们执行上例代码,不但无法获得我们想要的结果,而且还会报错!就是因为在页面加载到并执行js的时候页面标签还没有加载出来!所以这时候获取标签会报错!这是我们可以用window.onload来修改上面代码:

<html>
<head>
<title>hello world</title>
<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById("box");
        oBox.style.color = red;
    }
</script>
</head>
<body>
    <div id="box">hello world!</div>
</body>
</html>

  

这样就不会有问题了!当然你也可以不使用window.onload而改为把js代码写在页面底部也是不会有为题的!

 

window.onload的用法如下:

window.onload = function(){
    alert("hello world!");
}

  

或者这样:

function sayHello(){
    alert("hello world!");
}
window.onload = sayHello;//值得注意的是,这里只需写方法名,不能加小括号,因为这里相当于是对方法的一个引用,加小括号的话就变成调用了!

  

其次使用上面的方法window.onload是不能同时加载多个函数的!这是为什么了?

其实,在这里,我们不妨把window.onload当成是一个变量,把函数绑定看成是给变量赋值,这样就比较好理解了,当我们多次给同一个变量赋值时,后赋的值会覆盖掉前面所赋的值!同样的道理,在一般方法的事件绑定中,后绑定的函数会覆盖掉先绑定的函数!这就是多次绑定,只执行最后一次绑定方法的原因!

那么我们怎么给他绑定多个函数了?其实我们可以这样处理:

function a1(){......}//方法一
function a2(){......}//方法二
......
function an(){......}//方法n
//事件绑定
window.onload = function(){
    a1();
    a2();
    ...
    an();//注意,这里是方法调用,所以必须有小括号
}

  

那么如果我们在前面已经给window.onload绑定了函数,后面又要进行绑定,那该怎么办了?不要着急,办法总是有的,请看这里:

function addLoadEvent(func) {
    var oldonload = window.onload;//得到上一个onload事件的函数
    if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串,如果不是,直接绑定!
        window.onload = func;
    } else {  //如果是:
        window.onload = function() {
            oldonload();//调用之前覆盖的onload事件的函数
            func();//调用当前事件函数
        }
    }
}

  

我们可以使用上诉方法来尝试一下,看看具体用法:

function t(){
    alert("t")
}
function b(){
    alert("b")
}
function c(){
    alert("c")
}
 
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {  
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于  window.onload =function() { t();  b(); c() ;}

  

以上就是关于window.onload绑定多个函数的一些方法,当然你还可以使用attachEvent和attachEvent来进行事件绑定,在这里就不多做介绍了,有兴趣的同学可以去百度一下!

好了,看到这里相信到家对window.onload应该有一个比较基本的了解了,当然由于本人水平有限,所以讲解的不是很透彻还请各位看官多多包含!

 

本文由 平凡公子原创并首次发布,欢迎转载(转载请注明作者及本文地址)!

posted @ 2015-11-13 17:46  平凡公子  阅读(4900)  评论(0编辑  收藏  举报