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定时保存表单数据的代码
Mar 17 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
JavaScript中while循环的基础使用教程
Aug 11 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 开发环境配置(Zend Studio)
2010/04/28 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
网页javascript精华代码集
2007/01/24 Javascript
28个JS验证函数收集
2010/03/02 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python中的作用域规则详解
2015/01/30 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python 反向输出字符串的方法
2018/07/16 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
办公室助理岗位职责
2013/12/25 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
中介业务员岗位职责
2014/04/09 职场文书
红旗渠导游词
2015/02/09 职场文书
全国助残日活动总结
2015/05/11 职场文书
银行求职信怎么写
2019/06/20 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技