跨浏览器的事件对象-EventUtil对象的使用

为了解决跨浏览器的事件处理程序，需要编写一个方法，习惯上，这个方法属于一个名为EventUtil的对象，编写并使用该对象后，可保证处理事件的代码能在大多数浏览器下一致的运行。

var EventUtil = {
	// 添加事件，保证对浏览器的兼容性。
	addHandler: function(element, type, handler) {
		if (element.addEventListener) {
			element.addEventListener(type, handler, false); //使用DOM2级方法添加事件
		} else if (element.attachEvent) {
			element.attachEvent("on" + type, handler);      //使用IE方法添加事件
		} else {
			element["on" + type] = handler;                 //使用DOM0级方法添加事件
		}
	},
	// 取消事件，保证对浏览器的兼容性。
	removeHandler: function (element, type, handler ) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false); //使用DOM2级方法取消事件
		} else if (element.detachEvent) {
			element.detachEvent("on" + type, handler);		   //使用IE方法取消事件
		} else {
			element["on" + type] = null;					   //使用DOM0级方法取消事件
		}
	},
	// 跨浏览器取得event事件对象
	getEvent: function(event) {
		return event ? event : window.event;     //event为兼容DOM浏览器中事件对象；window.event为IE浏览器中事件对象
	},
	// 返回事件的实际目标
	getTarget: function(event) {
		return event.target || event.srcElement; //target为兼容DOM浏览器中事件对象属性；srcElement为IE浏览器中事件对象属性
	},
	// 阻止事件的默认行为
	preventDefault: function(event) {
		if (event.preventDefault) {
			event.preventDefault();    //兼容DOM浏览器
		} else {
			event.returnValue = false; //IE浏览器
		}
	},
	// 阻止事件冒泡
	stopPropagation: function(event) {
		if (event.stopPropagation) {
			event.stopPropagation();   //兼容DOM浏览器
		} else {
			event.cancelBubble = true; //IE浏览器
		}
	}
}

调用EventUtil中的方法：

var btn = document.getElementById("myBtn");
var handler = function(event){
   event = EventUtil.getEvent(event);       // 获取event事件对象
   var target = EventUtil.getTarget(event); // 获取目标元素
   EventUtil.preventDefault(event);         // 阻止事件的默认行为
   EventUtil.stopPropagation(event);        // 阻止事件冒泡
};
EventUtil.addHandler(btn, "click", handler);    //绑定事件
EventUtil.removeHandler(btn, "click", hanlder); //移除事件

参考：跨浏览器的事件对象-------EventUtil 中的方法及用法