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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
js 函数调用模式小结
Dec 26 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
解决layui表格的表头不滚动的问题
Sep 04 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投票系统防刷票判断流程分析
2012/02/04 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
原生js实现随机点名
2020/07/05 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python pickle模块用法实例
2015/04/14 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers