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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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 多进程 解决难题
2009/06/22 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
Python进行数据提取的方法总结
2016/08/22 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Django配置文件代码说明
2019/12/04 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
大学军训感言600字
2014/02/25 职场文书
旷课检讨书范文
2014/10/30 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL