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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
react MPA 多页配置详解
Oct 18 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
React实现todolist功能
Dec 28 Javascript
cypress测试本地web应用
Jun 01 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
通过php修改xml文档内容的方法
2015/01/23 PHP
php实现异步数据调用的方法
2015/12/24 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python常用函数与用法示例
2019/07/02 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
家长给小学生的评语
2014/01/30 职场文书
抵押贷款承诺书
2014/05/30 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB