我们在JavaScript中经常需要在网页文档加载完毕后立刻执行某函数 。网页加载完毕后会触发一个onload事件,这个时间与window对象相关联。

例如,我们现在有一个wasabi函数,我们需要在网页文档加载完毕后立刻执行wasabi函数,那么我们就这样写:

window.onload = wasabi;

但是假如我有两个函数怎么办呢?比如我现在有一个wasabi1函数和一个wasabi2函数,怎样让它们都在页面加载时得到执行?我们可能会想到将它们逐一绑定在onload事件上:

window.onload = wasabi1;
window.onload = wasabi2;

但其实,这样的做法是错误的! 它们中只有最后一个函数(即wasabi2)才会被得到实际执行。因为wasabi2将取代wasabi1

在需要绑定的函数不是很多的场合,我们可以这样写:

window.onload = function()
{
   wasabi1();
   wasabi2();
}

但是在需要绑定的函数非常多的时候,这时就不适用了。Simon Willison大神早就给出了一个解决方案:编写一个addLoadEvent函数:

function addLoadEvent(func)
{
   var oldonload = window.onload;//将现有的window.onload事件存入oldonload变量
   if(typeof oldonload != 'function')//如果这个事件处理函数上还没有绑定任何函数
       window.onload = func;//那么就给它添加这个函数
   else//如果事件处理函数上已经有了其他的函数
  {
       window.onload = function()
      {
           oldonload();//执行旧的函数
           func();//并将新函数追加到现有指令的末尾
      }
  }
}

这样我们以后在需要网页加载完毕后执行多个函数时,就只用这样写:

addLoadEvent(wasabi1);
addLoadEvent(wasabi2);
分类: Javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注