美文网首页
JS案例26-addEventListener( )和attac

JS案例26-addEventListener( )和attac

作者: hi__world | 来源:发表于2018-10-26 23:22 被阅读0次
    • addEventListener()火狐谷歌IE9+支持

    • attachEvent()IE678支持

    这就需要写一个完美兼容的方法啦

    源码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button>赋诗</button>
    
    <script>
    
        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;
                }
            }
        }
    
    
        EventListen.addEvent(btn,fn1,"click")
        EventListen.addEvent(btn,fn2,"click")
    
        function fn1(){
            console.log("九尺龙泉万卷书,上天生我意何如。");
        }
        function fn2(){
            console.log("不能报国平天下,枉为男儿大丈夫。");
        }
    </script>
    </body>
    </html>
    

    还可以去除你添加的某个事件

    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;
                }
            }
        }
    

    相关文章

      网友评论

          本文标题:JS案例26-addEventListener( )和attac

          本文链接:https://www.haomeiwen.com/subject/nslrtqtx.html