js共享onload事件

  问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考。

  一、对于小型的网页,可以直接用下面的代码绑定即可:

window.onload = func;

  二、在复杂的一些可以用:

window.onload = function(){
    func1();
    func2();
    func3();
}

  在需要绑定的函数不太多的场合,这是最简单的解决方案。

  三、对于复杂场合,则需要用到addLoadEvent函数来完成该任务了。不多说,先上代码:

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

  通过阅读代码,可以得出该函数完成的操作有:

    1、把现有的window.onload事件处理函数的值存入oldonload;

    2、如果这个函数还未绑定任何函数,就像“一”那样添加;

    2、如果这个函数上已经绑定了一些函数,则把新函数追加到现有指令的末尾。

  可以看出,它把在网页加载完成时需要执行的函数创建成了一个队列,需要的时候直接加入队列即可。至于如何调用该函数进行绑定,在可以在你实现完新函数后,在后面跟着调用一下就ok,如:

addLoadEvent(新函数名);

  最后,addLoadEvent函数有Simon Willison编写,详见http://simon.incutio.com

 

posted @ 2016-06-30 10:22  七颗牙  阅读(953)  评论(0编辑  收藏  举报