注册事件兼容

Posted aimeeblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了注册事件兼容相关的知识,希望对你有一定的参考价值。

注册事件的方式
        1.  ele.on事件类型 = function(){} 兼容性最高,但只能绑定一个
        2.  addEventListener(事件类型,事件处理函数,useCapture)  第三个参数默认是false,冒泡阶段执行
        3.  attachEvent(事件类型,事件处理函数)

        1.在注册事件的时候,判断浏览器的注册事件的方式,然后直接使用该方式进行注册事件
            复用性太差
        2.将注册事件的代码封装到一个函数中
            每次调用该函数,都会进行浏览器能力检测
        3.在函数中返回函数,让外部函数只执行一次,判断也就只会执行一次
            使用函数内创建的函数返回给外界,就可以重复使用该函数,进行事件的注册
//封装成函数,问题是每次都会判断 handler处理函数
       function registeEvent(target, type, handler){
           if(target.addEventListener){
               target.addEventListener(type,handler)
           }else if(target.attachEvent){
               target.attachEvent("on"+type,handler)
           }else{
               target["on"+type] = handler;
           }
       }

 

//这里存在问题就是

        //我们使用统一的方式,进行事件注册

        //1、注册的事件的处理函数中的,this指向不一致
        //使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
        //但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window

        //2、3种注册事件的方式中,回调函数内获取事件对象的方式也是不一致的
        //要让他们统一,
        //在第二种的事件注册方式(attachEvent)中,手动给handler传递window.event

         function createEventRegister(){
            if(window.addEventListener){
                return function(target, type, handler){
//                    this ---> window
                    target.addEventListener(type,handler)
                    
                }
            }else if(window.attachEvent){
                return function(target, type, handler) {
                    target.attachEvent("on" + type, function(){
                        handler.call(target, window.event);
                    })
                }
            }else{
                return function(target, type, handler) {
                    target["on" + type] = handler;
                }
            }
        }

        var registeEvent = createEventRegister();


        window.onload =function () {
            var div = document.getElementById("div1");
            registeEvent(div,"click",function(e){
                console.log(e);////MouseEvent
                console.log(this); //div标签内容
                //this---->该事件的触发对象
                alert("太阳天空照,花儿对我笑,小鸟说:完了")
            })
        }

技术分享图片

补充一个小知识

技术分享图片

 

 










以上是关于注册事件兼容的主要内容,如果未能解决你的问题,请参考以下文章

事件的绑定以及兼容代码

事件高级1注册事件(绑定事件)

事件高级1注册事件(绑定事件)

JS事件高级

JavaScript封装一个注册函数解决兼容问题

JS高级——封装注册事件