欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

把多个JavaScript函数绑定到onload事件处理函数上的方法

时间:2021-01-08 12:20:49|栏目:JavaScript代码|点击:

为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上:

window.onload = userFunction

但如果有两个函数:firstFunction() 和 secondFunction(),都想让它们在页面加载完毕后得到执行,该怎么办?如果这样:

window.onload = firstFunciton;
window.onload = secondFunction;

只有最后一个函数能被执行。由此可得:每个事件处理函数只能绑定一条指令。

但我们可以这样做:

   window.onload = function(){
     firstFunction();
     secondFunction();
   }

这是一个解决办法。

不过,还有一个更通的解决方案――额外编写一些代码,但好好处是,有了这些代码,把函数,不管它们有多少,绑定到window.onload事件上的工作就非常简明易行了。

这个函数的的名字是addLoadEvent,它是由Simon Willison编写的。它只有一个参数:打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent()函数将要完成的操作:

1. 把现有的window.onload事件处理函数的值存入变量oldonload。

2. 如果在这个处理函数上还没有绑定任何函数,就像平时那样把形函数添加给它。

3. 如果在这个处理函数上已经绑定了一些函数,就把形函数追加到现有指令的末尾。

下面是addLoadEvent()函数的代码清单:

function addLoadEvent(func){
     var oldonload = window.onload;
     if(typeof window.onload != 'function'){
        window.onload = func;
     }else{
        window.onload = function(){
          oldonload();
          func();
        }
     }
}

这相当于为那些将在页面加载完毕时执行的函数创建了一个队列。如果想把刚才那两个函数添加到队列中去,只需要写出以下代码即可:

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

上一篇:JavaScript中计算网页中某个元素的位置

栏    目:JavaScript代码

下一篇:详解JavaScript基于面向对象之继承

本文标题:把多个JavaScript函数绑定到onload事件处理函数上的方法

本文地址:http://www.codeinn.net/misctech/42276.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有