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基础的动画教程,直观易懂
Jan 10 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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
单位速度在实战中的运用
2020/03/04 星际争霸
解析php中获取系统信息的方法
2013/06/25 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
python 网络编程常用代码段
2016/08/28 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python实现网页自动签到功能
2019/01/21 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python中对_init_的理解及实例解析
2019/10/11 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python json格式化打印实现过程解析
2020/07/21 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
党校自我鉴定范文
2013/10/02 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
会议通知范文
2015/04/15 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python