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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
学习Vue组件实例
Apr 28 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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 冒泡排序 交换排序法
2011/05/10 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python登录注册验证功能实现
2018/06/18 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
华为慧通面试题
2012/09/11 面试题
what is the difference between ext2 and ext3
2013/11/03 面试题
法人任命书范本
2014/06/04 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python