使用“事件监听/链式事件处理方式”实现window.onload同时调用多个函数

window.onload的作用是在HTML页面加载完成后,再运行被调用的函数。这样可以避免一个现象就是当要运行的函数里包含某个HTML页面元素(如document.getElmentByID)而当函数运行时,该元素却还没被浏览器加载,则此时会因找不到对应元素而出错。

      但window.onload在同个页面里只能被使用一次,这就导致了假如你写了如下代码:

      window.οnlοad=firstFunction;

      window.οnlοad=secondFunction;

      那么最终secondFunction会覆盖掉firstFunction,导致无法成功调用firstFunction。

      一般情况下解决这个问题采用两类方式,一类是用事件监听器,另一类是用链式事件处理方式。事件监听器会是优先考虑的方式,但由于一些老式浏览器可能无法识别事件监听语句,因此我们在实际操作中可能也需要为用户提供备选的链式事件处理方式。现在开始贴代码:

//实现用window.onload同时调用多个函数,调用顺序是从后往前。前三种用监听器实现,后一种用链式事件处理方式实现。注意:监听器W3C标准方法是addEventListener(非IE浏览器采用此方法),但IE浏览器用attachEvent。
addLoad(firstFunction);
addLoad(secondFunction);
addLoad(thirdFunction);

function addLoad(fn)
{
     if (typeof window.addEventListener != "undefined")//判断浏览器是否能够识别window.addEventListener,假如可以,则执行以下代码
          {
                 window.addEventListener("load",fn,false);
           }
      else if (typeof document.addEventListener != "undefined")//某些浏览器无法识别window.addEventListener,只能识别document.addEventListener,因此要增加这一步判断
      {
             document.addEventListener("load",fn,false);
       }
      else if (typeof window.attachEvent != "undefined")//前面两种都无法识别,则判定是否可以识别window.attachEvent
       {
            window.attachEvent("onload",fn);
      }
      else//前三种都无法识别,则用这最后一种:老式链式事件处理方式
       {
            var oldfn=window.onload;
           if (typeof window.onload != "function")
             {
                   window.οnlοad=fn;
            }
            else
             {
                   window.οnlοad=function()
                  {
                         oldfn();
                         fn();
                   };
             }
     }
}


function firstFunction()//最先的函数最后运行
{
      alert("这是第一个函数")
}

function secondFunction()//第二个运行
{
      alert("这是第二个函数")
}

function thirdFunction()//最后的函数最先运行
{
      alert("这是第三个函数")
}

      程序运行的结果是先后弹出三个对话框。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值