前端解决浏览器兼容问题合集（1）——事件兼容

浏览器兼容（主要是ie浏览器）是前端最头疼的问题之一，接下来的文章我将整理各种兼容性问题解决办法。
这是第一篇文章，针对如何解决事件兼容问题，首先分析ie与其他浏览器的区别何在

一、事件处理程序

• 其他浏览器使用addEventListener()和 removeEventListener()实现处理指定和删除事件处理程序的操作

• ie浏览器使用attachEvent()和 detachEvent()实现处理指定和删除事件处理程序的操作

• 兼容性写法：

```javascript
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;
	}
},
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;
	}
},

二、事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什 么方法（DOM0 级或 DOM2 级），都会传入 event 对象。获取事件目标是event.target

• 获取事件目标： event.target
• 阻止事件默认行为：event.preventDefault();
• 阻止事件冒泡：event.stopPropagation();

ie浏览器

• 事件对象：要访问 IE 中的 event 对象有几种不同的方式，取决于指定事
  件处理程序的方法。在使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在
  
• 获取事件目标：event.srcElement
• 阻止事件默认行为：event.returnValue = false;
• 阻止事件冒泡：event.cancelBubble = true;

兼容性写法：

```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;
		}
	},
	stopPropagation: function(event) {//阻止事件冒泡
		if (event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	}

三、总结

总结跨浏览器事件工具类代码如下，有需自取：

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;
		}
	},
	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;
		}
	},
	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;
		}
	},
	stopPropagation: function(event) {//阻止事件冒泡
		if (event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	}
};