js window.onload 加载多个函数和追加函数详解


Posted in Javascript onJanuary 08, 2014

平时做项目 经常需要使用window.onload,

用法如下:

function func(){alert("this is window onload event!");return;}

window.onload=func;

或者如下:

window.onload=function(){alert("this is window onload event!");return;}

但window.onload 不能同时加载多个函数。

比如:

function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;

后面会把前面的覆盖,上面代码只会输出 b。

此时可用如下方法解决:
window.onload =function() { t();  b(); }

另一种解决方法如下:

 function addLoadEvent(func) {
  var oldonload = window.onload;//得到上一个onload事件的函数
  if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
    window.onload = func;
  } else {  
    window.onload = function() {
      oldonload();//调用之前覆盖的onload事件的函数---->由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
      func();//调用当前事件函数
    }
  }
}
//(完整示例)使用如下:
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
 function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {  
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于  window.onload =function() { t();  b(); c() ;}

个人以为直接使用隐式函数(如:window.onload =function() { t();  b(); c() ;})更快捷,当然使用 addLoadEvent 更professional,各取所好吧!

JS window.onload追加函数:

<script>
if(window.attachEvent)//IE:如果浏览器中存在window.attachEvent函数则使用window.attachEvent函数,判断是否是IE还可以使用:if (document.all){//..}
window.attachEvent("onload",function() {alert("add method");});
else  //FireFox
window.addEventListener("load",function() {alert("add method");},true);
</script>

运行,js中alert弹出消息,问题解决。

============相关资料================

attachEvent   将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。

Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener 中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
extjs fckeditor集成代码
May 10 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 #Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 #Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 #Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 #Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 #Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 #Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 #Javascript
You might like
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php绘制一个矩形的方法
2015/01/24 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
vue prop传值类型检验方式
2020/07/30 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Django Highcharts制作图表
2016/08/27 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
实现向右循环移位
2014/07/31 面试题
什么是Smart Navigation?
2016/07/03 面试题
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
数学教研活动总结
2014/07/02 职场文书
电子工程求职信
2014/07/17 职场文书
党员个人对照检查材料
2014/10/01 职场文书
接待员岗位职责
2015/02/13 职场文书
结婚主持人致辞
2015/07/28 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
防止web项目中的SQL注入
2021/12/06 MySQL