Javascript之浏览器兼容EventUtil

var EventUtil = {
    //添加事件处理程序
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
            //DOM2中定义的事件处理程序，IE9，Firefox,Safari,Chrome和Opera支持此方法。
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
            //在IE中attachEvent()方法是在全局作用域中运行的，也就是this等于window。而且如果给一个事件添加了多个处理程序，其执行顺序是逆序的。
        } else {
            element["on" + type] = handler;
            //DOM0级方法，其只对每个事件只支持一个事件处理程序。
        }
    },
    //移除事件处理程序
    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;
            //DOM0级方法
        }
    },
    //获取事件对象
    getEvent: function (event) {
        return event ? event : window.event;
        //在兼容DOM的浏览器中，event是简单的传入和返回；在IE中，event是未定义的(undefined)，而是一个window对象属性。
    },
    //获取事件目标
    getTarget: function (event) {
        return event.target || event.srcElement;
    //IE中的事件目标属性是srcElement。
    },
    //取消事件的默认行为
    //只有在cancelable属性为true时，才可以取消事件的默认行为。
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
         //IE中的事件对象有returnValue属性，默认为true，设置为false可以取消默认行为。
        }
    },
    //取消事件的捕获或者冒泡
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
            //可以用来取消事件捕获和冒泡。
        } else {
            event.cancelBubbles = true;
            //兼容IE，只可以取消事件冒泡。
        }
    },
    //获取相关元素，只对于mouseover,mouseout才包含值，对于其他事件是null。
    getRelatedTarget: function (event) {
        if (event.relatedTarger) {
            return event.relatedTarget;
            //DOM通过relatedTarget属性保存相关元素。
        } else if (event.toElement) {  //兼容IE，mouseout触发。
            return event.toElement;
        } else if (event.fromElement) {  //兼容IE，mouseover事件触发。
            return event.fromElement;
        } else { return null; }

    },
    //获取鼠标点击按钮
    getMouseButton:function(evsent){
        if (document.implementation.hasFeature("MouseEvents","2.0")){
           return event.button;  //0-鼠标主按键/左键；1-鼠标中间按键/滚轮；2-鼠标次按键/右键。
        }  else{
             switch(event.button){
                 case 0:
                 case 1:
                 case 5:
                 case 7:
                     return 0;
                 case 2:
                 case 6:
                     return 2;
                 case 4:
                     return 1;
             }
        }
     },
     //鼠标滚轮事件,获取wheelData。
     getWheelData:function(event){   //向前滚动是，wheelData是120的倍数，向后滚动是-120的倍数。
        if(event.wheelData){
            return (client.engine.opera && client.engine.opera<9.5 ? -event.wheelData : event.wheelData);
            //在opera9.5前的版本中，wheelData的正负号是颠倒的。
        }   
        else{ return -event.detail*40;} //兼容Firefox，其鼠标滚轮信息保存在detail中，而且是向前是-3的倍数，向后是3的倍数。
     },
     //取得按键的字符编码
     getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;  //IE9，Firefox,Safari,Chrome的event对象有一个charCode属性，只有发生keypress事件时才包含值。

        } else {
            return event.keyCode;   //IE8及之前的版本和Opera在keyCode中保存字符编码。
        }
     }
     //操作剪切板
        //取得剪切板数据
     getClipboardText: function(event){ 
        var clipboardData = (event.clipboardData || window.cilpboardData);//在IE中是window对象的属性。
        return clipboardData.getData("text"); //在IE中有两种数据格式text和url；其他浏览器是MIME类型，但可以用text代表text/plain。
     }
        //设置剪切板数据
     setClipboardText: funtion(evnet,value){
        if (event.clipboardData){  
            return event.clipboardData.setData("text/plain", value); //与以上不同的是setData方法不能识别text。
            } else if (window.clipboardData){
                return window.clipboardData.setData("text", value); //兼容IE
            }
     }
 
}

持续更新中……