事件兼容

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) {    // 獲取事件的目標(biāo)
        return event.targer || event.srcElement;
    },
    
    preventDefault: function(event) {   // 阻止默認(rèn)事件
        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 通過(guò) event 對(duì)象的 relatedTarget 屬性提供了相關(guān)元素的信息。
        // 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 對(duì)象中存在的 button 屬性中是否包含正確的值。 如果測(cè)試失敗， 說(shuō)明是 IE， 就必須對(duì)相應(yīng)的值進(jìn)行規(guī)范化。
        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 對(duì)象都支持一個(gè) charCode 屬性，這個(gè)屬性 只有在發(fā)生 keypress 事件時(shí)才包含值，而且這個(gè)值是按下的那個(gè)鍵所代表字符的 ASCII 編碼。 DOM3不支持charCode，改為key（或keyIdentifier）和char；(不推薦)

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

頁(yè)面坐標(biāo)兼容

// 例子，調(diào)用事件兼容對(duì)象實(shí)現(xiàn)
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);
    }
    
});

過(guò)濾輸入兼容

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