event对象的兼容性处理 — 第13.3讲

想过没有，你最最痛恨的ie全家却能提高你的编程能力！

  IE中的event对象和DOM中的event不同，要访问IE中的event对象取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序的时候，event对象作为window对象的一个属性存在。

var btn1 = document.getElementById('btn1');
btn1.onclick = function(e){
   alert(e === window.event);//在ie678和火狐上返回false，在其他浏览器上返回true
   alert(e);  //在ie678和火狐上 返回undefined，在其他浏览器返回event对象    
}

  IE的event对象同样包含和创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法。具体如下：

由于事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。所以，最好还是用event.srcElement比较好。代码为：

        btn2.onclick = function(e){
            alert(window.event.srcElement)
            alert(window.event.srcElement === this) //true
            alert(window.event.target)
        }
        btn2.attachEvent('onclick',function(e){
            alert(e.srcElement);
            alert(this)
            alert(e.srcElement === this);            //false
        })

  还有一个问题，returnValue属性相当于DOM中的preventDefault()方法，他们区别是：returnValue没有办法确定时间是否能被取消。
还有一个问题，cancelBubble属性和DOM中的stopPropagation()方法相同，都是用来停止事件冒泡的，由于IE不支持时间捕获，因而只能取消事件冒泡，而stopPropagation可以同时取消事件捕获和冒泡
根据以上问题，我们封装了解决所有浏览器Event对象兼容性的类，如下所示：

    var EventUtil = {
    addHandler: function (element, type, handler) { //添加事件
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    getEvent: function (e) { //获取event对象,在兼容dom的浏览器中，event变量只是简单地传入和返回，但是在IE中，event参数未定义，其实就是undefined，因此，我们需要根据IE的特性把event对象赋值成window.event,这样就可以兼容每个浏览器
        return e ? e : window.event;
    },
    getTarget: function (e) { //在这个方法内部，会检测event对象的target属性，如果存在返回target，否则返回srcElement属性
        return e.target || e.srcElement;
    },
    preventDefault: function (e) { //获取事件的目标,preventDefault()方法和returnValue属性的作用一样，如果preventDefault()方法不存在，就换做returnValue=false
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    },
    stopPropagation: function (e) { //阻止冒泡,Ie不支持事件捕获，因此，这个方法只能用来阻止事件冒泡
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    },
    removeHandler: function (element, type, handler) { //移除事件
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    },
    getRelatedTarget: function (e) { //发生mouseover和mouseout时可以获取相关元素
        if (e.relatedTarget) {
            return e.relatedTarget;
        } else if (e.toElement) {
            return e.toElement;
        } else if (e.fromElement) {
            return e.fromElement;
        } else {
            return null;
        }
    },
    getButton: function(e) { //使用mousedown和mouseup时使用
        if (document.implementation.hasFeature("MouseEvents", "20")) {
            return e.button;
        } else {
            switch (e.button) {
            case 0:
            case 1: 
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
            }
        }
    },
    getCharCode:function(event){   //返回字符编码
        if(typeof event.charCode == "number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }
}

event对象兼容类的使用方法：
使用一：添加事件

EventUtil.addHandler(btn1, 'click', handler);

使用二：//获取event对象

    btn2.onclick = function(e){
        e = EventUtil.getEvent(e);          
        alert(e)
    }

使用三：返回事件的目标

    btn3.onclick = function(e){
        e = EventUtil.getEvent(e);
        alert(EventUtil.getTarget(e));
    }

使用四：取消事件默认行为

    btn4.onclick = function(e){
        e = EventUtil.getEvent(e);
        EventUtil.preventDefault(e);
    }

使用五：阻止事件冒泡

    btn5.onclick = function(e){
        alert('btn click');
        e = EventUtil.getEvent(e);
        EventUtil.stopPropagation(e);
    }
    document.body.addEventListener('click',function(){
        alert('body click');
    },false);

使用六：删除事件

    EventUtil.removeHandler(btn1,'click',handler);

推荐：上面的如果看不明白，建议先看另一篇博文DOM事件产生的原理：http://blog.csdn.net/flyingpig2016/article/details/53385978