原生js中如果有多个onload事件解决方案

在一个页面中有两个JavaScript 分别都用到了window.onload

一个是:window.onload=func1,另一个是:window.onload=func2 这样就造成了一个JavaScript 运行不了。

方案一:

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

方案二:

用window.attachEvent和 window.addEventListener来解决问题了

window.addEventListener("load",调用函数名,false);//对于FireFox 
window.attachEvent("onload",调用函数名)//对于IE 

方案三

function addLoadEvent(func){  
    var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。  
    if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数,就像平时那样把新函数添加给它  
        window.onload = func;  
    }else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
  
}  
addLoadEvent(num1);
addLoadEvent(num2);

如果有人接下来的js写了一个加载事件:

window.onload = function(){ console.log('最后再来个页面加载函数')} 

结果妥妥的被覆盖了,只会执行最后一个window.load的内容,因此方案三不可取

推荐使用现代浏览器事件绑定 方案二。

原文地址:https://www.cnblogs.com/happy-8090/p/11830582.html