原生js解决引入多个js文件时window onload的覆盖问题

原生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;

目前也就想到这么多了

此处有引用别人代码,如被引用人感觉不适,请联系本人,并会在看到后第一时间做回应。

如需转载请标明出处

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值