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.validate使用攻略 第三部
Jul 01 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
js实现文字滚动效果
Mar 03 Javascript
javascript history对象详解
Feb 09 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php提示undefined index的几种解决方法
2012/05/21 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP加密解密类实例代码
2016/07/20 PHP
php的扩展写法总结
2019/05/14 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现telnet服务器的方法
2015/07/10 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
浅谈django orm 优化
2018/08/18 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
优秀求职信范文分享
2013/12/19 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
工地安全质量标语
2014/06/07 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
化妆品促销活动总结
2015/05/07 职场文书