跨浏览器的事件对象

设置EventUtil对象来处理浏览器间的差异

• addHandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数

var client = function() {
    var engine = {
//         呈现引擎
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0, 
        opera: 0,
        
//        具体的版本号
        ver: null
    };
    
//     在此检测呈现引擎、平台和设备
    
    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的倍数，当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数
// 在Opera9.5之前的版本中，wheelDelta值得正负号是颠倒的

var client = function() {
    var engine = {
//         呈现引擎
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0, 
        opera: 0,
        
//        具体的版本号
        ver: null
    };
    
//     在此检测呈现引擎、平台和设备
    
    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