javascript中的addLoadEvent函数解析

墨初学习笔记2174

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

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

javascript中的addLoadEvent函数解析

直接调用两次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 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行(这句很重要)。

相关文章

LAMP和LNMP,你更愿意选择谁,为什么?

这几天一直在捣鼓服务器的网站环境,不知道是装apache好,还是装nginx好。这不又开始找百度,查资料,看看大神们怎么说的。lamp 的全称是linux + apache + mysql +phpl...

CMS教程域名备案,解析,文件上传

今天说说大淘客CMS的一些事情。一般来说大淘客CMS属于一种小型的个人站点,麻雀虽小,但五脏俱全,对于一些没有接触过网站设计,网站运营的新手来说,难度还是很大的。今天我们说说大淘CMS建站的第二步伐,...

PHP中include()与require()的区别说明(一)

require 的使用方法如 require("xxx.php"); 。这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require 所指定引入的文件,...

PHP错误日志 display_errors与log_errors的区别

错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项。错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利。推荐关闭此选项display_errors 错误回显...

javascript中创建元素节点,文本节点与插入节点

javascript中创建元素节点,文本节点与插入节点

在javascript中提供了很多操作DOM文档的方法,当然也包括创建一个节点(元素),创建一个文本节点(text),还有把创建的节点插入到文档中去。createElement方法createElem...

JavaScript中for...in 语句详解

JavaScript中for...in 语句详解

在编程中我们会使用到各式各样的循环语句,以使我们可以对一个数组进行读操作或是写入赋值的操作,当然在javascript中这少不了这样的循环语句的存在。今天记录一下关于JavaScript for......

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。