window.onload绑定多个事件的两种解决方案


Posted in Javascript onMay 15, 2016

前言

有些函数,必须在网页加载完毕后执行。比如:涉及DOM操作的。

网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可。

window.onload = myFunction;

问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法

方案一

创建一个匿名函数,来容纳需要绑定的多个事件,再讲这个匿名函数绑定到onload事件上

window.onload = function(){
firstFunction();
secondFunction();
...... 
}

方案二

由Simon Willsion编写的addLoadEvent函数:

function addEventLoad(func){
var oldOnload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
} 
}

将现有的window.onload事件处理函数的值存入变量oldOnload
如果这个处理函数上还没有绑定函数,则和那样把新函数绑定给它。
如果已经绑定了函数,则把新的函数追加到指令的末尾。

调用方法:

addEventLoad(firstFuction);

addEventLoad(secondFuction);

以上内容是小编通过两种方案给大家介绍的window.onload绑定多个事件的方法,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
js仿淘宝和百度文库的评分功能
May 15 #Javascript
RequireJS使用注意细节
May 15 #Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
jQuery插件开发汇总
May 15 #Javascript
Javascript的无new构建实例详解
May 15 #Javascript
Javascript基础知识盲点总结之函数
May 15 #Javascript
深入理解$.each和$(selector).each
May 15 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
stripos函数知识点实例分享
2019/02/11 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python中time、datetime模块的使用
2020/12/14 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
华为python面试题
2016/05/03 面试题
教师师德反思材料
2014/02/15 职场文书
文明生主要事迹
2014/05/25 职场文书
健康教育评估方案
2014/05/25 职场文书
优秀大学生自荐信
2015/03/26 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
小学数学教师研修日志
2015/11/13 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python