把多个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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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实现rc4加密算法代码
2012/04/25 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue实现简单计算器案例
2020/02/25 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
图书室管理制度
2014/01/19 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年减负工作总结
2014/12/10 职场文书
培训通知
2015/04/17 职场文书
团组织关系介绍信
2019/06/24 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python