addLoadEvent(func)详解

最新推荐文章于 2019-04-27 17:28:01 发布

dbyt45595

最新推荐文章于 2019-04-27 17:28:01 发布

阅读量144

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/Annguowenhua/p/4977324.html

版权

平常前端小白在添加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);

转载于:https://www.cnblogs.com/Annguowenhua/p/4977324.html

dbyt45595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
addLoadEvent(func)详解

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

扫一扫

addLoadEvent(func)详解

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