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的对话框详解与参数
Mar 08 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
js实现两点之间画线的方法
May 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python实现比较文件内容异同
2018/06/22 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
详解python深浅拷贝区别
2019/06/24 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
党支部对照检查材料
2014/08/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
vue判断按钮是否可以点击
2022/04/09 Vue.js
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android