原生js解决引入多个js文件时window.onload的覆盖问题
本人菜鸟一枚,如有不足之处,请大神们指出
话不多说直接上解决方案
此处代码不多主要是方案
方法1
- 我们可以设计一个主程序入口,如man.js ,其他js文件可写在一个函数内,放到man.js调用其他js文件,主思想编程思维,,哈哈装一下。
代码
//main.js代码
window.onload = function(){
//一个js文件的函数
what();
//另一个js文件函数
fuck();
//...多个就是文件函数,相插多少插多少
}
方法二
- 可以直接放在html页页面body最小孩子处,不加window.onload;代码就省了;
方法三
可以使用eventutil对象,方法需要自己封装
//此片段来源地址;https://blog.csdn.net/chen_enson_1/article/details/82878444
var EventUtil={
addHandler:function(element,type,handler){ //添加事件
if(element.addEventListener){
element.addEventListener(type,handler,false); //使用DOM2级方法添加事件
}else if(element.attachEvent){ //使用IE方法添加事件
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler; //使用DOM0级方法添加事件
}
},
removeHandler:function(element,type,handler){ //取消事件
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){ //使用这个方法跨浏览器取得event对象
return event?event:window.event;
},
getTarget:function(event){ //返回事件的实际目标
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止事件的默认行为
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ //立即停止事件在DOM中的传播
//避免触发注册在document.body上面的事件处理程序
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getRelatedTarget:function(event){ //获取mouseover和mouseout相关元素
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){ //兼容IE8-
return event.toElement;
}else if(event.formElement){
return event.formElement;
}else{
return null;
}
},
getButton:function(event){ //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){ //将IE模型下的button属性映射为DOM模型下的button属性
case 0:
case 1:
case 3:
case 5:
case 7:
return 0; //按下的是鼠标主按钮(一般是左键)
case 2:
case 6:
return 2; //按下的是中间的鼠标按钮
case 4:
return 1; //鼠标次按钮(一般是右键)
}
}
},
getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
if(event.wheelDelta){
return event.wheelDelta;
}else{
return -event.detail*40;
}
},
getCharCode:function(event){ //以跨浏览器取得相同的字符编码,需在keypress事件中使用
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
顺便一提:navigator.onLine可以检查设备是否在线或者离线哦,true表示在线,false表示离线
方法四
- 创建容器保存;
//判断之前是否有wondow.onload,防止被覆盖
let save = null; //创建一个保存器
if(typeof window.onload == 'function'){
save = window.onload; //把之前的window.onload关进去,面壁思过
};
window.onload = function(){
save();
//.....你的骚操作
}
方法五
- 不要脸的说法,用jquery;
目前也就想到这么多了
此处有引用别人代码,如被引用人感觉不适,请联系本人,并会在看到后第一时间做回应。