夸浏览器事件对象

问题描述

由于IE和DOM中的事件处理机制的差别，我们在编写JavaScript脚本中需要对事件处理进行浏览器兼容处理，本文为阅读了《JavaScript高级程序设计》后的笔记，方便今后查看。

对象编写

var EventUtil = {
    /**
     * 绑定事件
     * @param element dom节点
     * @param type 绑定的事件类型
     * @param handler 事件的执行函数
     */
    addHandler: function (element, type, handler) {
        //能力检测
        if(element.addEventListener){
            //最后一个参数false表示事件在冒泡阶段触发
            element.addEventListener(type, handler, false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type, handler);
        }else{
            element["on" + type] = handler;
        }
    },
    /**
     * 解除事件绑定
     * @param element dom节点
     * @param type 绑定的事件类型
     * @param handler 事件的执行函数
     */
    removeHandler: function (element, type, handler) {
        if(element.removeEventListener){
            //最后一个参数false表示事件在冒泡阶段触发
            element.removeEventListener(type, handler, false);
        }else if(element.detachEvent){
            element.detachEvent("on" + type, handler);
        }else{
            element["on" + type] = handler;
        }
    },
    /**
     * 获取事件对象event
     * @param event
     * @returns {Event}
     */
    getEvent: function (event) {
        return event ? event : window.event;
    },
    /**
     * 获取事件对象target
     * @param event
     * @returns {any | Element}
     */
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    /**
     * 阻止默认事件
     * @param event
     */
    preventDefault: function (event) {
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    /**
     * 阻止事件冒泡
     * @param event
     */
    stopPropagation: function (event) {
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    /**
     * 获取鼠标按钮的值
     * @param event
     * @returns {*} 返回的值：0表示主鼠标按钮，1表示中间的鼠标按钮，2表示次鼠标按钮
     */
    getButton: function (event) {
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }else{
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    /**
     * 获取鼠标滚动的WheelDelta值
     * @param event
     * @returns {number} 返回值+的表示滚轮向上滚动，-的表示滚轮向下滚动
     */
    getWheelDelta: function (event) {
        if(event.wheelDelta){
            //Opera 9.5之前的版本wheelDelta值的正负号颠倒
            return (window.opera && window.opera.version<9.5 ? -event.wheelDelta : event.wheelDelta);
        }else{
            //Firefox 的滚动事件
            return -event.detail * 40;
        }
    },
    /**
     * 获取
     * @param event
     * @returns {number | *}
     */
    getCharCode: function (event) {
        if(typeof event.charCode == "number"){
            //IE9、Firefox、Chrome、Safari
            return event.charCode;
        }else{
            //IE8之前的版本、Opera
            return event.keyCode;
        }
    }
}