注册事件的兼容性处理

注册事件的方式
1. ele.on事件类型 = function(){}
2. addEventListener(事件类型,事件处理函数,useCapture) 第三个参数默认是false，冒泡阶段执行
3. attachEvent(事件类型，事件处理函数)

第一种方式只能有一个事件处理函数，而第二、三种可以定义多个事件处理函数

addEventListener IE9以下版本以及OPERA7以下版本不支持

attachEvent  只有IE6-10版本里支持，IE11及其他浏览器不支持

兼容性写法

下面这种方式每次注册事件都会进来判断，复用性太差

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

优化后的兼容性写法

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

注意事项:

1、注册的事件的处理函数中的，this指向不一致

使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window

div.addEventListener("click",function(e){
this --->target
 e.screenX;
 })

div.attachEvent("onclick".function(){
 this--->window
 window.event.screenX
})

解决方法： handler.call(target, window.event);

2.3种注册事件的方式中，回调函数内获取事件对象的方式也是不一致的

要让他们统一，在第二种的事件注册方式（attachEvent）中，手动给handler传递window.event

3.事件冒泡与捕获。比如当子元素和父元素都注册了click事件,如果为事件捕获，当点击子元素时，父元素的click时间处理函数先执行，然后执行子元素的click时间，如果为事件冒泡，则执行顺序相反