当前位置：首页 > 资讯 > 技术文档

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

时间：2021-06-09 12:04 编辑：来源：阅读：
扫一扫，手机访问

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

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上： window.onload = userFunction 但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样：

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

只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。但我们可以这样做：

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

这是一个解决办法。不过，还有一个更通的解决方案——额外编写一些代码，但好好处是，有了这些代码，把函数，不管它们有多少，绑定到window.onload事件上的工作就非常简明易行了。这个函数的的名字是addLoadEvent，它是由Simon Willison编写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。 [b]下面是addLoadEvent()函数将要完成的操作：[/b] 1. 把现有的window.onload事件处理函数的值存入变量oldonload。 2. 如果在这个处理函数上还没有绑定任何函数，就像平时那样把形函数添加给它。 3. 如果在这个处理函数上已经绑定了一些函数，就把形函数追加到现有指令的末尾。 [b]下面是addLoadEvent()函数的代码清单：[/b]

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函数绑定到onload事件处理函数上的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript为事件句柄绑定监听函数实例详解
下一篇：js学习总结_轮播图之渐隐渐现版(实例讲解)

资讯排行榜
更多>>