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应该有一个比较基本的了解了，当然由于本人水平有限，所以讲解的不是很透彻还请各位看官多多包含！

本文由 平凡公子原创并首次发布，欢迎转载（转载请注明作者及本文地址）！

window.onload的一些说明的更多相关文章

  1. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  2. $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...

  3. JS:window.onload的使用

    1.最简单的调用方式 直接写到html的body标签里面,如: (html) (body onload="func()") (/body) (/html) 2.在JS语句调用 (s ...

  4. jQuery $(document).ready() 与window.onload的区别

    ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...

  5. window.onload =writeMessage(); 与window.onload =writeMessage;的区别

    window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...

  6. $(document).ready,$(window).load,window.onload区别和联系

    $(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...

  7. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  8. window.onload与$(document).ready()的区别

    对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...

  9. jquery中 $(document).ready()和window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...

  10. js window.onload 的一个验证

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 以下验证是否是图片加载完成后才执行 <img class="icon" id="ic ...

随机推荐

  1. window apache 多站点配置

    1. 让Apache在启动时能加载虚拟主机模块. 打开Apache安装目录下conf/httpd.conf文件,找到下面两行文字,把最前面的 # 号去掉,然后保存. #LoadModule vhost ...

  2. MTK 关闭安全模式

    1.当 Android 设备在安全模式(Safe Mode)下工作时,任何的第三方应用程序或相关文件(主要为apk应用程序文件)都不可以使用,但可以使用 Android 设备的任务管理器选项进行卸载或 ...

  3. Oauth2.0（一）：为什么需要 Oauth2.0 协议？

    假设有两家互联网企业 A 和 B,其中 B 是一家提供相片云存储的公司.即 B 的用户可以把相片上传到 B 网站上长期保存,然后可以在不同的设备上查看.某一天,A 和 B 谈成了一项合作:希望 B 用 ...

  4. DOS 配置IP地址

    @echo off :startIP set /p source=STATIC Y or N or E: echo source:%source% if "%source%" == ...

  5. office系列调节背景主题

    更改背景主题可以参考:https://jingyan.baidu.com/article/ff42efa9332adec19e220200.html 但是这种方法只是改变了整个软件外框架的背景颜色.以 ...

  6. 计算直线与WGS84椭球的交点

    /************************************************************************/ /*线段与WGS84椭球求交 x^2/a^2+y^ ...

  7. U3D的控制

    做游戏少不了控制,但是一个成熟的游戏引擎,是不能简单仅仅获取键盘中或者遥感确定的按键来控制,要考虑到用户更改游戏按键的情况,当然也得考虑到不同设备的不通输入方式,比如U3D是可以运行在iphone上的 ...

  8. html主要笔记

    1.用title属性作为工具提示 2.链接到锚点 <a href="http://wickedlysmart.com/buzz#Coffee"> 3.<em> ...

  9. 在javaweb的项目当中实现随机数字的生成

    首先,需要在javaweb的项目当中新建一个Servlet文件,然后再web.xml中配置一下: 这样运行的时候就可以通过“http://localhost:8080/Response/Respons ...

  10. 关于vc工程包含多个lib库老是提示无法打开问题

    在一个VC项目中,我要包含五个lib库,我在连接器->常规->附加库目录中输入了正确的库包含路径,然后再连接器->输入->附加依赖项中输入:ws2_32.lib;wsock32 ...