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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
vue 限制input只能输入正数的操作
Aug 05 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
合作指挥官:孟斯克
2020/03/16 星际争霸
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
如何在python中实现随机选择
2019/11/02 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python self用法详解
2020/11/28 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
宿舍违规检讨书
2014/01/12 职场文书
个人求职自荐信范文
2014/06/20 职场文书
监考失职检讨书
2015/01/26 职场文书
课外活动总结
2015/02/04 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android