addLoadEvent(func)详解

平常前端小白在添加onload事件时通常会在<body>标签加入,可是会出现几个很大的问题;第一,违反行为与结构分离原则,第二,加入<body>标签意味着需要等结构里所有文件加载完全后才触发此事件,很有可能用户还未等到就点击其他链接了。

这时就会想到window.onload事件,可是同时加载多个window.onload事件会造成最后一个window.onload覆盖之前所有的window.onload函数。

此时可以用到Simon Willison(http://simon.incutio.com)编写的 addLoadEvent(func)函数

 1 function addLoadEvent(func){
 2       var oldonload = window.onload;
 3       if(typeof oldonload != 'function'){
 4           window.onload = func;
 5        }else{
 6           window.onload = function(){
 7           oldonload();
 8           func();
 9          }
10        } 
11      }       

解析:
1.把现有的window.onload事件处理函数的值存入变量 oldonload。
2.如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它。
3.如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾。

原本:
window.onload = firstfunction;
window.onload = secondfunction;
第二个函数会覆盖第一个函数,然而有了addLoadEvent(func)就不怕啦,不管有多少函数都可以执行了。

但是,
addLoadEvent(firstfunction);
addLoadEvent(firstfunction);
......
addLoadEvetn(nfunction);

posted @ 2015-11-19 13:17  Annguowenhua2015  阅读(311)  评论(0编辑  收藏  举报