設(shè)置EventUtil對象來處理瀏覽器間的差異

• addHandler()方法接受3個參數(shù)：要操作的元素、事件名稱和事件處理程序函數(shù)

var client = function() {
    var engine = {
//         呈現(xiàn)引擎
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0, 
        opera: 0,
        
//        具體的版本號
        ver: null
    };
    
//     在此檢測呈現(xiàn)引擎、平臺和設(shè)備
    
    return {
        engine: engine
    }
}();


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) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    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;
        }
    },
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event) {
        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) {
        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;
                               }
        }
    },
    getWheelDelta: function(event) {
        if (event.wheelDelta) {
            return (client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40
        }
    }
};
?

// 示例
var btn = document.getElementById("content")
var handler = function() {
    alert("hahahahahah")
};
EventUtil.addHandler(btn, "click", handler)

EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    var keys = new Array()
    if (event.shiftKey) {
        keys.push("shift")
    }
    
    if (event.ctrlKey) {
        keys.push("ctrl");
    }
    
    if (event.altKey) {
        keys.push("alt");
    }
    
    if (event.metaKey) {
        keys.push("meta")
    }
    
    console.log("Keys: " + keys.join(","));
})
//處理鼠標滾輪的交互操作
// 當用戶向前滾動鼠標滾輪時， wheelDelta是120的倍數(shù)，當用戶向后滾動鼠標滾輪時，wheelDelta是-120的倍數(shù)
// 在Opera9.5之前的版本中，wheelDelta值得正負號是顛倒的

var client = function() {
    var engine = {
//         呈現(xiàn)引擎
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0, 
        opera: 0,
        
//        具體的版本號
        ver: null
    };
    
//     在此檢測呈現(xiàn)引擎、平臺和設(shè)備
    
    return {
        engine: engine
    }
}();

EventUtil.addHandler(document, "mousewheel", function(event) {
    event = EventUtil.getEvent(event);
    var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
    console.log(delta)
})

}G`FZ9VIRYI4QYXLKXE9R8M.png