把多个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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
vue中watch和computed的区别与使用方法
Aug 23 Javascript
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简单获取目录列表的方法
2015/03/24 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Vue中fragment.js使用方法小结
2020/02/17 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python中bisect模块用法实例
2014/09/25 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python数据可视化之画图
2019/01/15 Python
django表单的Widgets使用详解
2019/07/22 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
校三好学生主要事迹
2014/01/11 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
委托书的样本
2015/01/28 职场文书
介绍信范文
2015/01/31 职场文书
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android