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应该有一个比较基本的了解了，当然由于本人水平有限，所以讲解的不是很透彻还请各位看官多多包含！
本文由 平凡公子原创并首次发布，欢迎转载（转载请注明作者及本文地址）！
window.onload的一些说明的更多相关文章
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- $(document).ready() 与window.onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...
- JS:window.onload的使用
1.最简单的调用方式 直接写到html的body标签里面,如: (html) (body onload="func()") (/body) (/html) 2.在JS语句调用 (s ...
- jQuery $(document).ready() 与window.onload的区别
ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...
- window.onload =writeMessage(); 与window.onload =writeMessage;的区别
window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...
- $(document).ready,$(window).load,window.onload区别和联系
$(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- jquery中 $(document).ready()和window.onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...
- js window.onload 的一个验证
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 以下验证是否是图片加载完成后才执行 <img class="icon" id="ic ...
随机推荐
- WebSocket、Socket、TCP、HTTP区别
https://www.cnblogs.com/merray/p/7918977.html
- HNOI2015题解
奇了怪了我上次发的题解怎么不见了? 题意自己戳链接-- Day 1 id=4008">HNOI2015 Arthur 思路:期望DP 直接DP是死也D不出的 转化一下 令f[i][j] ...
- Hibernate_day03讲义_使用Hibernate完成多对多的关系映射并操作
- Python之虚拟环境管理
Python本身有很多个版本,第三方的Python包又有很多可用的版本,所以经常会遇到下面的问题: 运行不同的Python程序,需要使用不同版本的Python(2.x或3.x). 在同一中Python ...
- vue中使用动态echart图表
<template> <div class="block"> <div class="title">展会实时人流里统计< ...
- python3存入redis是bytes
在python3 中使用redis存储数据,存进去的是bytes >>> import redis >>> import time >>> imp ...
- hwi-web安装
hwi是hive的简单简单web端 安装hwi之前需要下载apache-hive-2.1.1-src,将hwi/web的打成hive-hwi-2.1.1.war.安装配置apache-ant-1.10 ...
- 使用pyenv管理不同的python版本
1. pvenv的安装 git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME ...
- Python调用7zip命令实现文件批量解压
Python调用7zip命令实现文件批量解压 1.输入压缩文件所在的路径 2.可以在代码中修改解压到的文件路径和所需要解压的类型,列入,解压文件夹下面所有的mp4格式的文件 3.cmd 指的就是Pyt ...
- 使用java发送QQ邮件
使用java发送邮件的时候,需要先下载两个jar包,连接如下: JavaMail mail.jar 1.4.5 JAF(版本 1.1.1) activation.jar 然后将这连个包导入,博主用的是 ...