简要理解注册事件的兼容性处理和问题分析

在平常使用js代码中事件是不可或缺的那么js中定义事件的方式有哪些呢？

01 addEventListener（事件类型，事件处理函数，useCapture）；

02 attachEvent（事件类型，事件处理函数) 【用于ie 详细兼容性请参考MDN】

03 ele.on事件类型  = function{事件}

[01]useCapture：

细心的人可能会发现 addEventeListener中的参数貌似比attachEvent多了个欸；

那么useCapture是什么呢？

事件有三个阶段 1 捕获阶段（从外向里冒泡）， 2 目标阶段 ，3 冒泡阶段（从里向外冒泡）;

而useCapture是决定该事件是在捕获阶段调用还是在冒泡阶段调用；

• true - 事件句柄在捕获阶段执行
• false- false- 默认。事件句柄在冒泡阶段执行

我个input加了一个父节点，同时给他也加一个弹出事件。弹出 hello  子元素弹出 你好

现在是false 点击按钮 出现 你好 再出现 hello

改成true 点击按钮 先出现 hello  再出现 你好！

个人总结：false的话 就是事件冒泡了 从子元素到父元素

                    true的话   就是事件捕获 从父到子！

[02]注册事件的兼容性处理

ok我们通过[01]简要理解了事件冒泡和事件捕获等问题那么进入今日正题，如何处理注册事件的兼容性问题

//事件有三阶段  1阶段 捕获阶段（从外向内）  2 阶段 目标阶段  3阶段 冒泡阶段（从里向外进行冒泡）
    //1.在注册事件的时候，判断浏览器的注册事件的方式，然后直接使用该方式进行注册事件
    //复用性太差
    //2.将注册事件的代码封装到一个函数中
    //每次调用该函数，都会进行浏览器能力检测
    //3.在函数中返回函数，让外部函数只执行一次，判断也就只会执行一次
    //使用函数内创建的函数返回给外界，就可以重复使用该函数，进行事件的注册

    var div = document.getElementById("div1");
    if(div.addEventListener) {
        div.addEventListener('click', function () {
            alert(true);
        })
    }else if (div.attachEvent)  {
        div.attachEvent('click', function () {
            alert("222");
        })
    }else {
        div.onclick  = function () {
            alert(333);
        }
    }
    //封装成函数 但是问题是每次都会进行执行
    function registEvent(target,type,fuc) {
        if(target.addEventListener) {
            target.addEventListener(type,fuc);
        }else if(target.attachEvent) {
            target.attachEvent(type,fuc);
        }
        target['on'+type] = fuc;

    }

虽然我们封装了函数但是每次都会执行噻，于是我们再进行升级

[03]升级代码

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

    //2、3种注册事件的方式中，回调函数内获取事件对象的方式也是不一致的
    //要让他们统一，
    //在第二种的事件注册方式（attachEvent）中，手动给handler传递window.event
    function createEventRegister() {
        if (window.addEventListener) {
            return function (target,type,hander) {
                target.addEventListener(type,hander);
            }
        }else  if (window.attachEvent) {
            return function (target,type,hander) {
                target.attachEvent(type,hander);
            }
        }else {
            return function (target,type,hander) {
                target['on'+type] = hander;
            }
        }
    }

    var registeEvent = createEventRegister();

        var div = document.getElementById("div1");
        registeEvent(div,"click",function(){
            console.log(e);//mouseEvent //事件的调用对象
            console.log(this);// div   //事件的触发对象 所以this就是事件的触发对象
            //this---->该事件的触发对象
            alert("太阳天空照，花儿对我笑，小鸟说：完了");
        });

通过升级代码我们又发现了一些新的问题：

01 我们使用addEventListener 的时候其this指向的是target （也就是事件触发对象 例如例子中的div）

02 我们使用attachEvent的时候其this指向的是window

这是为什么呢？

[04]:注册事件兼容性问题分析：

 var div = document.getElementById("dvd1");

    div.onclick = function (e) {
        //this === div
    }
    div.addEventListener("click", function (e) {//e是事件的调用对象 也就是MouseEvent
        //this === div
    })
    div.attachEvent("onclick", function () {
        //window.event获取div
        //this === window
    })

代码一目明了，target[on+type]的方式和addEventListener的方式其在事件使用的时候this指向的都是事件触发对象

attachEvent的this之所以指向的是window 是因为在attachEvent调用的时候需要通过window中的event方法获取事件触发对象，所以该事件中的this自然指向了window

[05]总结：

（ie真坑）；