js事件监听解绑添加兼容写法

淡淡的烟草味﹌ 2022-07-13 23:19 219阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button>赋诗</button>
    <script>
    //-----------------------------------事件的概述----------------------
                var btn = document.getElementsByTagName("button")[0];
    
                //第一种事件绑定的方法容易被层叠。
                //    btn.onclick = function () {
                //        console.log("九尺龙泉万卷书，上天生我意何如。");
                //    }
                //
                //    btn.onclick = function () {
                //        console.log("不能报国平天下，枉为男儿大丈夫。");
                //    }
    
                //addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
                //第二种事件绑定的方法不会出现层叠。（更适合团队开发）
                btn.addEventListener("click",fn1);
                btn.addEventListener("click",fn2);
                function fn1(){
                    console.log("九尺龙泉万卷书，上天生我意何如。");
                }
                function fn2(){
                    console.log("不能报国平天下，枉为男儿大丈夫。");
                }
    
                //调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数)           参数3事件名(捕获或者冒泡)
    
    
    
    
    //--------------------------事件的监听原理--------------------------
                var btn = document.getElementsByTagName("button")[0];
    
                //    btn.addEventListener("click",fn1);
                //    btn.addEventListener("click",fn2);
                fn("click",fn1,btn);
                fn("click",fn2,btn);
                fn("click",fn3,btn);
    
                function fn1(){
                    console.log("九尺龙泉万卷书，上天生我意何如。");
                }
                function fn2(){
                    console.log("不能报国平天下，枉为男儿大丈夫。");
                }
                function fn3(){
                    console.log("111111。");
                }
    
                //原理（了解）（自己封装一个）(click)
                function fn(str,fn,ele){
                    //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
                    //所以获取旧的事件必须在新的事件绑定之前
                    var oldEvent = ele["on"+str];
                    ele["on"+str] = function () {
                        //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
                        //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
                        //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
                        //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
                        if(oldEvent){
                            //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                            oldEvent();
                            fn();
                        }else{
                            //没有绑定过事件
                            fn();
                        }
                    }
                }
    
    
    
    //-------------------------事件添加的兼容写法----------------------------
                var btn = document.getElementsByTagName("button")[0];
    
                //火狐谷歌IE9+支持addEventListener
                //    btn.addEventListener("click",fn1);
                //    btn.addEventListener("click",fn2);
    
                //IE678支持attachEvent
                //    btn.attachEvent("onclick",fn1);
                //    btn.attachEvent("onclick",fn2);
    
                //兼容写法
                EventListen = {
                    addEvent: function (ele,fn,str) {
                        //通过判断调用的方式兼容IE678
                        //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
                        if(ele.addEventListener){
                            //直接调用
                            ele.addEventListener(str,fn);
                        }else if(ele.attachEvent){
                            ele.attachEvent("on"+str,fn);
                        }else{
                            //在addEventListener和attachEvent都不存在的情况下，用此代码
                            ele["on"+str] = fn;
                        }
                    }
                }
    
    
                EventListen.addEvent(btn,fn1,"click")
                EventListen.addEvent(btn,fn2,"click")
    
    
    
                function fn1(){
                    console.log("九尺龙泉万卷书，上天生我意何如。");
                }
                function fn2(){
                    console.log("不能报国平天下，枉为男儿大丈夫。");
                }
    
    
    
    
    //-------------------------事件的解绑兼容写法----------------------------
                var btn = document.getElementsByTagName("button")[0];
    
                EventListen = {
                    addEvent: function (ele,fn,str) {
                        //通过判断调用的方式兼容IE678
                        //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
                        if(ele.addEventListener){
                            //直接调用
                            ele.addEventListener(str,fn);
                        }else if(ele.attachEvent){
                            ele.attachEvent("on"+str,fn);
                        }else{
                            //在addEventListener和attachEvent都不存在的情况下，用此代码
                            ele["on"+str] = fn;
                        }
                    },
                    removeEvent: function (ele,fn,str) {
                        if(ele.removeEventListener){
                            ele.removeEventListener(str,fn);
                        }else if(ele.detachEvent){
                            ele.detachEvent("on"+str,fn);
                        }else{
                            ele["on"+str] = null;
                        }
                    }
                }
    
                //    btn.addEventListener("click",fn);
                EventListen.addEvent(btn,fn,"click");
    
                EventListen.removeEvent(btn,fn,"click");
    
                function fn(){
                    alert(1);
                }
                //第一种
                //    btn.onclick = function () {
                //        alert(1);
                //    }
    
    
                //    btn.addEventListener("click",fn);
                //    btn.attachEvent("onclick",fn);
    
    
                //    btn.onclick = null;
    
                //第二种
                //    btn.removeEventListener("click",fn);
                //    btn.detachEvent("onclick",fn);
    </script>
    </body>
    </html>