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的构造函数和constructor属性
Jan 09 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 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
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
python批量修改文件编码格式的方法
2018/05/31 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
岗位明星事迹材料
2014/05/18 职场文书
理财学专业自荐书
2014/06/28 职场文书
平面设计专业求职信
2014/08/09 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL