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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
js中开关变量使用实例
Feb 24 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
深入理解Vue nextTick 机制
Apr 28 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
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
在普通HTTP上安全地传输密码
2007/07/21 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python检测lvs real server状态
2014/01/22 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python登录注册验证功能实现
2018/06/18 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python语言基本语句用法总结
2019/06/11 Python
Django视图类型总结
2021/02/17 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
视光学专业毕业生推荐信
2013/10/28 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
绿色小区申报材料
2014/08/22 职场文书
2014年派出所工作总结
2014/11/21 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
MySQL创建定时任务
2022/01/22 MySQL
Golang 链表的学习和使用
2022/04/19 Golang