记录 - 兼容相关（主要IE）

事件兼容

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(event) {     // 获取event元素
        return event ? event : window.event;
    },
    
    getTarget: function(event) {    // 获取事件的目标
        return event.targer || event.srcElement;
    },
    
    preventDefault: function(event) {   // 阻止默认事件
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;  // 兼容ie
        }
    },
    
    stopPropagation: function(event) {  // 阻止冒泡
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = false;
        }
    },
    
    removeHandler: function(element, type, handler) {   // 移除事件
        if (element.removeEventListener) {
            element.removeEventListener(type, handler);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    },
    
    getRelatedTarget: function(event) { 
        // DOM 通过 event 对象的 relatedTarget 属性提供了相关元素的信息。
        // mouseover 和 mouseout 事件才包含值；
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else {
            return null;
        }
    },
    
    getButton: function(event) {
    // 就可以确定 event 对象中存在的 button 属性中是否包含正确的值。 如果测试失败， 说明是 IE， 就必须对相应的值进行规范化。
        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 4;
            }
        }
    },
    
    getCharCode: function(event) {
    // IE9、 Firefox、 Chrome 和 Safari 的 event 对象都支持一个 charCode 属性，这个属性 只有在发生 keypress 事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。 DOM3不支持charCode，改为key（或keyIdentifier）和char；(不推荐)

        if (typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
}

页面坐标兼容

// 例子，调用事件兼容对象实现
var div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click', function(event) {
   event = EventUtil.getEvent(event);
   var pageX = event.pageX,
       pageY = event.pageY;
    
    if (pageX === undefined) {
        pageX = event.clickX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    
    if (pageY === undefined) {
        pageY = event.clickY + (document.body.scrollTop || document.documentElement.scrollTop);
    }
    
});

过滤输入兼容

EventUtil.addHandler(textbox, 'keypress', function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    // charCode 去除上下方向键等。event.ctrlKey确保用户没按ctrl键
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {
        EventUtil.preventDefault(event);
    }
});