注册事件兼容

Posted 2020-12-31 aimeeblogs

注册事件的方式
        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("太阳天空照，花儿对我笑，小鸟说：完了")
            })
        }

补充一个小知识