跨浏览器的事件处理

一、事件对象的类型

事件类型	IE中的事件对象	DOM中的事件对象
获取方法	window.event	event

两者都含有一些常规的属性/方法，在所有的事件中呈现。

DOM事件对象的属性/方法：

IE事件对象的属性/方法：

除却以上的属性，还有些事件拥有着较为特殊的属性，如：

事件	属性/放放	介绍
mousedown	buttons	1-按下左键；2-按下右键；3-同时按下左右键
mousewheel	wheelDelta	120-往前滑动；-120-往后滑动
keydown/keyup	keyCode	数字字符键时，keyCode属性的值和ASCII对应的小写字母或数字的编码相同；非数字字符键，也有着对应的键码。
keypress	charCode	该事件触发意味着按下的键会影响到屏幕中文本的显示，键码对应ASCII的编码，区分大小写。
contextmenu	——	鼠标右键事件，可调出上下文菜单，该事件是冒泡的，因此可以在window上使用事件委托。另外可在目标元素中利用event.preventDefault()方法阻止上下文菜单出现。

要注意，在Opera9.5之前的版本，wheelDelta的正负号是颠倒的，另外firefox支持一个DOMMouseScroll的滚轮事件，当event.detail == -3时表示往前滑动， event.detail == 3时，表示往后滑动。那么如何做到跨浏览器的事件处理呢？

二、跨浏览器的事件处理

由上文可知，不同浏览器的事件对象以及属性是不一样的，为了让代码适应各种浏览器，不少开发人员会运用框架（jQuery等），但是自己编写也并不难。

var EventUtil = {
	getEvent: function (event) {
		return event ? event : window.event;
	},
	getTarget: function (event) {
		return event.target || event.srcElement;
	},
	getWheelDelta: function(event) {
		if (event.WheelDelta) {
			return (client.engine.opera && client.engine.opera < 9.5 ? -event.WheelDelta : event.wheelDelta);
		} else {
			return (-event.detail * 40)
		}
	},
	preventDefault: function(event) {
		if (event.preventDefault) {
			event.preventDefault()
		} else {
			event.returnValue = false;
		}
	}
}


//获取事件流的目标标签
<button id = "mybtn"> 按钮 </button>
var  btn = document.getElementById("mybtn");
btn.onclick = function(event) {
	var eve = EventUtil.getEvent(event);
	vat target = EventUtil.getTarget(eve);
	console.log(target === this) //true
}