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