把多个JavaScript函数绑定到onload事件处理函数上的方法
更新时间：2016年09月04日 10:27:41 投稿：jingxian
下面小编就为大家带来一篇把多个JavaScript函数绑定到onload事件处理函数上的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：
window.onload = userFunction
但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样：
window.onload = firstFunciton; window.onload = secondFunction;
只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。
但我们可以这样做：
window.onload = function(){
firstFunction();
secondFunction();
}
这是一个解决办法。
不过，还有一个更通的解决方案——额外编写一些代码，但好好处是，有了这些代码，把函数，不管它们有多少，绑定到window.onload事件上的工作就非常简明易行了。
这个函数的的名字是addLoadEvent，它是由Simon Willison编写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。
下面是addLoadEvent()函数将要完成的操作：
1. 把现有的window.onload事件处理函数的值存入变量oldonload。
2. 如果在这个处理函数上还没有绑定任何函数，就像平时那样把形函数添加给它。
3. 如果在这个处理函数上已经绑定了一些函数，就把形函数追加到现有指令的末尾。
下面是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);
以上这篇把多个JavaScript函数绑定到onload事件处理函数上的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
基于JS定义回车事件的实现代码，需要的朋友可以参考下2013-07-07
下面小编就为大家带来一篇js数组的五种迭代方法及两种归并方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了Javascript Web Worker使用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
刚看到笑看风云写的JavaScript面向对象(极简主义法)和一个分解url参数面试题，我作了一下修改，记录下来2012-08-08
这篇文章主要为大家详细介绍了微信小程序实现红包雨功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
在处理前端显示后端传递的包含换行符的文本时,可以通过多种方法实现换行显示,这篇文章主要介绍了前端处理文本换行展示4种处理方法,这些方法帮助前端正确展示格式化文本,解决了文本堆叠的问题,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Ajax 加载数据，主要是为了查询表的显示，不用嵌入php通过ajax调用，现在手机端的更多显示功能都是通过ajax实现的2017-01-01
这篇文章给大家分享jfinal与bootstrap之间的登录跳转，具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。感兴趣的朋友跟着小编一起看看吧2015-09-09
最近工作中遇到了一些死循环导致的页面卡死问题,经过 trouble shooting 和代码修复解决了问题,所以下面这篇文章主要给大家介绍了怎么检测和防止JavaScript死循环的相关资料,需要的朋友可以参考下2021-11-11
本文通过实例代码给大家介绍了JS实现简单滑块拼图游戏，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-10-10
最新评论