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全排列的六种算法 具体实现
Jun 29 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php解析url的三个示例
2014/01/20 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
安装docker-compose的两种最简方法
2019/07/30 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
入党申请自荐书范文
2014/02/11 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
课程设计的心得体会
2014/09/03 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python