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 相关文章推荐
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript中的私有成员
2006/09/18 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
js实现无缝滚动图
2017/02/22 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
单位接收函范文
2015/01/30 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
高中美术教学反思
2016/02/17 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python