onload事件是HTML DOM Event 对象的一个属性,又叫事件句柄(Event Handlers),它会在页面或图像加载完成后(注意是加载完成后)立即发生。

window.onload = func的作用就是在页面加载完成后将func函数绑定到onload事件上并执行。如果页面加载完成之后,只需要执行一个函数func,那么只用window.onload = func也就可以了,但是如果需要执行两个甚至多个函数呢?

直接调用两次onload不就行了:

window.onload=firstfunction;
window.onload=secondfunction;

这么做的话,只有secondfunction会被绑定,因为前面的值被后面的值覆盖了。那么该怎么办?

将两个函数合并到一个函数当中不就行了,匿名函数发挥作用的时候到了:

window.onload = function() {
fristfunction;
secondfunction;
}

不过,它也只能绑定两个函数。还好,大神们早已解决了这个问题。西蒙·威利森 (Simon Willison)——jQuery框架的开发者之一编写了下面的addLoadEvent函数:

function addLoadEvent(func) {
var oldonload = window.onload;//将现有的事件处理函数的值存入变量中
if (typeof window.onload != 'function') {
window.onload = func;//如果这个事件处理函数没有绑定任何函数,就把新函数添加给它
} else {
window.onload = function() {
oldonload();
func();//如果已经绑定了函数,就把新函数追加到现有指令的末尾
}
}
}

然后,不管页面加载完成后要执行多少个函数,只要调用这个函数就可以了:
addLoadEvent(firstfunction);
addLoadEvent(secondfunction);
addLoadEvent(thirdfunction);
...

附:相关概念
1  支持onload事件的 HTML 标签有<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
    支持该事件的 JavaScript 对象有image(图像), layer, window(整个页面)
2  事件句柄(Event Handlers),可以在某个事件发生时通过一个事件句柄对某个元素进行操作。
    事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。
3  HTML DOM Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行(这句很重要)。

参考资料:

JavaScript DOM编程艺术 by Jeremy Keith
HTML DOM Event 对象
事件

javascript学习—理解addLoadEvent函数的更多相关文章

  1. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  2. javascript学习总结之函数

    前言 在学习javascript函数的时候,有几个经常很容易混淆的方法,call,apply,bind,caller,callee,这些方法的使用,这些也可以说是会频繁使用的一些方法,在此通过查阅相关 ...

  3. 廖雪峰 JavaScript 学习笔记(函数)

    JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函 ...

  4. javascript学习笔记--迭代函数

    概要 这里的迭代函数指的是对数组对象的操作方法,js数组共有五个迭代函数:every.fifter.forEach.map.some. 1.every every方法,返回值为Boolean类型,tr ...

  5. JavaScript学习03(函数)

    函数 函数定义 JavaScript 函数是通过 function 关键词定义的. 声明定义 function functionName(parameters) { 要执行的代码 } 被声明的函数不会 ...

  6. 【JavaScript学习笔记】函数、数组、日期

    一.函数 一个函数应该只返回一种类型的值. 函数中有一个默认的数组变量arguments,存储着传入函数的所有参数. 为了使用函数参数方便,建议给参数起个名字. function fun1(obj, ...

  7. JavaScript学习笔记(散)——addLoadEvent函数

    先贴源码 function addLoadEvent(func) { var oldonload = window.onload; //存入当前onload事件 if(typeof window.on ...

  8. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  9. JavaScript学习总结-技巧、有用函数、简洁方法、编程细节

    整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...

随机推荐

  1. Runtime消息传送

    person.h #import<Foundation/Foundation.h> @interfacePerson :NSObject + (void)eat; - (void)run: ...

  2. 分享google的技能的11个级别,大家看看自己到哪个级别了?

    you are unfamiliar with the subject area. you can read / understand the most fundamental aspects of ...

  3. Java IO1:IO和File

    IO 大多数的应用程序都要与外部设备进行数据交换,最常见的外部设备包含磁盘和网络.IO就是指应用程序对这些设备的数据输入与输出,Java语言定义了许多类专门负责各种方式的输入.输出,这些类都被放在ja ...

  4. MSBuild 中的 PropertyGroup、ItemGroup 和 ItemMetadata

    在软件项目不断的进展中,MSBuild 脚本可能几个月都不会被修改,因为通常编译和发布的目录是不经常变化的. 但,一旦某天你需要修改了,看到那一堆 $(Something). @(Something) ...

  5. 【C语言学习】《C Primer Plus》第1章 概览

    学习总结 1.C语言于1972年由贝尔实验室的Dennis Ritchie在与Ken Thompson一起设计UNIX操作系统的时候开发的.的的设计构想来源于Ken Thompson的B语言.Anyw ...

  6. WebAdaptor Object reference not set to an instance of an object.

    C:\inetpub\wwwroot\arcgis目录下webAdaptor.config文件内容被清空,从别的地方拷贝一份即可. <?xml version="1.0" e ...

  7. Java提高配(三七)-----Java集合细节(三):subList的缺陷

    我们经常使用subString方法来对String对象进行分割处理,同时我们也可以使用subList.subMap.subSet来对List.Map.Set进行分割处理,但是这个分割存在某些瑕疵. 一 ...

  8. Unity3D热更新全书-下载 唯一的一篇

    下载在这个时代实在是太平常了,每个人都深刻的理解着下载到底是什么. 这一篇文字只是把下载的代码分享并介绍,而已. 首先,下载系统担负着几个使命. 第一.是保持客户端版本库的最新. 第二.是下载要能够比 ...

  9. OpenSSL密码算法库: MD5示例小程序

    OpenSSL http://www.openssl.org/ OpenSSL整个软件包大概可以分成三个主要的功能部分:密码算法库.SSL协议库以及应用程序.OpenSSL 的密码算法库包含多种加密算 ...

  10. [异常解决] 安卓6.0权限问题导致老蓝牙程序出现异常解决办法:Need ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission...

    一.问题: 之前写的一款安卓4.4的应用程序,用来连接蓝牙BLE,而现在拿出来用新的AS编译(此时SDK为6.0,手机也是6.0)应用程序并不能搜索到蓝牙,查看log总是报权限错误: Need ACC ...