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 相关文章推荐
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
移动端js触摸事件详解
Sep 18 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js读取配置文件自写
2014/02/11 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
工商治理实习生的自我评价分享
2014/02/20 职场文书
市场营销求职信范文
2014/02/21 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
大学生操行评语大全
2014/12/31 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB