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调试工具汇总
Dec 23 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
一个显示天气预报的程序
2006/10/09 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
js断点调试经验分享
2017/12/08 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
标准化管理实施方案
2014/02/25 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
机关作风建设整改方案
2014/10/27 职场文书
地球一小时活动总结
2015/02/27 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
导游词之介休绵山
2019/12/31 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python