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中dialog属性小记
Sep 03 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
wxPython的安装与使用教程
2018/08/31 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python实现多属性排序的方法
2018/12/05 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
医院实习接收函
2014/01/12 职场文书
财产公证书样本
2014/04/04 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015国庆节66周年标语
2015/07/30 职场文书