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让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
js脚本实现数据去重
Nov 27 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
详解Python编程中time模块的使用
2015/11/20 Python
python多进程并行代码实例
2019/09/30 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
安全生产月活动总结
2014/05/04 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书