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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php实现计数器方法小结
2015/01/05 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
详解Python self 参数
2019/08/30 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
用python读取xlsx文件
2020/12/17 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
保安员岗位职责
2013/11/17 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
社区科普工作方案
2014/06/03 职场文书
少先队活动总结
2014/08/29 职场文书
现役军人家属慰问信
2015/03/24 职场文书
在职证明书模板
2015/06/15 职场文书
python实现简易名片管理系统
2021/04/11 Python
golang中的空slice案例
2021/04/27 Golang