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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
JavaScript之数组扁平化详解
Jun 03 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与SQL注入攻击[三]
2007/04/17 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js 表格隔行颜色
2009/12/02 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python中分数的相关使用教程
2015/03/30 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
远程研修随笔感言
2014/02/10 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
见习报告的格式
2014/10/31 职场文书
环境建议书
2015/02/04 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python