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 相关文章推荐
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue 项目地址去掉 #的方法
Oct 20 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 存储文本换行实现方法
2010/01/05 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python图片验证码生成代码
2016/07/02 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
django model object序列化实例
2020/03/13 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
家长给小学生的评语
2014/01/30 职场文书
总经理助理职责
2014/02/04 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
员工2014年度工作总结
2014/12/09 职场文书
护士2015年终工作总结
2015/04/29 职场文书
小时代观后感
2015/06/10 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
python实现手机推送 代码也就10行左右
2022/04/12 Python