把多个JavaScript函数绑定到onload事件处理函数上的方法


Posted in Javascript onSeptember 04, 2016

为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到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事件处理函数上的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
JS简单测试循环运行时间的方法
Sep 04 #Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 #Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 #Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 #Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 #Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 #Javascript
You might like
php escape URL编码
2008/12/10 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php表单提交实例讲解
2015/11/12 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
园艺师求职信
2014/03/10 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
干部个人对照检查材料
2014/08/25 职场文书
优秀团员个人总结
2015/02/26 职场文书
可可西里观后感
2015/06/08 职场文书
新郎婚礼致辞
2015/07/27 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
浅谈python中的多态
2021/06/15 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
解析python中的jsonpath 提取器
2022/01/18 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android