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写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
token 机制和实现方式
Dec 15 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
phpmyadmin操作流程
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
基于php下载文件的详解
2013/06/02 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
Yii使用技巧大汇总
2015/12/29 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python取余运算符知识点详解
2019/06/27 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python 对xml解析的示例
2021/02/27 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
C#面试题问题集
2016/04/02 面试题
电子银行业务授权委托书
2014/10/10 职场文书
颐和园导游词400字
2015/01/30 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
设置IIS Express并发数
2022/07/07 Servers