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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
javascript截取字符串小结
Apr 28 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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分页函数
2006/07/08 PHP
用文本作数据处理
2006/10/09 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php常用数组函数实例小结
2016/12/29 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
jQuery取id有.的值的方法
2014/05/21 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
express中static中间件的具体使用方法
2019/10/17 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
详解python UDP 编程
2020/08/24 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
css3实现超炫风车特效
2014/11/12 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
辞职申请书范本
2019/05/20 职场文书
JS的深浅复制详细
2021/10/16 Javascript