addLoadEvent方法解析
onload方法在网页加载完毕时,会自动执行,但是该方法有个缺点就是只能执行一个方法。
onload的限制
比如下面的代码:
<script type="text/javascript">
function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
}
window.onload = func1;
window.onload = func2;
</script>
执行结果如下:
只有第二个方法被执行。
那么如何才能在页面加载完成后,执行多个方法呢?
可以采用addLoadEvent方法,这个方法是由其他人编写的,所以不是DOM里面的方法,如果使用直接复制下面这段代码就可以了!
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行!");
window.onload = func;
}else{
console.log("addLoadEvent多次执行!");
window.onload = function(){
oldonload();
func();
}
}
}
有了这段代码,就可以给onload绑定多个方法:
function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
}
addLoadEvent(func1);
addLoadEvent(func2);
原理如同:
window.onload = function(){
func1();
func2();
}
下面看一下执行的结果:
完美达到目的!
代码解析
虽然只有几行代码,但是第一次接触的时候,难免晕头转向!
仔细阅读下面的代码:
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行!");
window.onload = func;
}else{
console.log("addLoadEvent多次执行!");
window.onload = function(){
oldonload();
func();
}
}
}
这个方法需要一个参数func,就是传入的方法名称。
当我们使用一次addLoadEvent的时候,就相当于调用window.onload = func1;
此时window.onload应该是null,因此判断语句typeof window.onload != 'function' 就会返回true.
执行后,可以看到window.onload方法变成了func1:
再次调用addLoadEvent时,进入else的部分。把func2与原来的oldonload方法一同绑定成新的方法。
执行后,看到window.onload方法变成如下的样子:
以此类推,当有多个方法时,就会构造出如下的方法:
window.onload = function(){
func1();
func2();
...
func10000();
}
这样就可以在onload时,绑定多个方法了。
总结起来,该方法就是把 所有想要在onload时期执行的方法 构造成一个 方法的执行对列 ,然后使用onload执行这个 队列方法 。
参考
【1】addLoadEvent(func)详解:http://www.cnblogs.com/joyan/archive/2010/06/29/1767577.html
【2】脚本之家addLoadEvent说明:http://www.jb51.net/article/21707.htm
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CloudFlare自定义节点优化网站
- 什么是SSL?为什么要为WordPress网站使用SSL?
- R语言再保险合同定价案例研究
- SAP CRM附件的技术属性设计原理
- R语言对混合分布中的不可观测与可观测异质性因子分析
- R替换函数gsub
- R语言泊松回归对保险定价建模中的应用:风险敞口作为可能的解释变量
- asp dotnet core 提供大文件下载的测试
- R语言模拟人类生活预期寿命动态可视化动画图gif
- Python遍历字典
- R语言随机森林模型中具有相关特征的变量重要性
- WPF 使用 Direct Manipulation 的方法
- R语言分析负利率下金融市场:负利率和年金价值的变化
- python字典-增、删、改
- C# dotnet 使用判断文件夹存在的方法判断一个文件路径会怎样