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代码
Feb 19 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
字符串反转_JavaScript
Apr 28 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Node.js使用Angular简单示例
May 11 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
详解vue 兼容IE报错解决方案
Dec 29 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
小学生感恩演讲稿
2014/04/25 职场文书
离职保密承诺书
2014/05/28 职场文书
雷人标语集锦
2014/06/19 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers