以下方法兼容IE8-跨浏览器处理事件

写js最常见的场景就是不断兼容各个版本的浏览器。其中，最令人沮丧的是IE系列。虽然jquery前期解决了很多麻烦，但随着最近jquery逐渐淡出，原生兼容的方法就显得更加重要了。众所周知，IE8是一个分水岭。然而，在 IE8 中却并非如此，如下所示。注册事件使用attachEvent，释放事件使用detachEvent。因此，一些比较老的项目在维护或者增加新功能的时候，就得自己写一套兼容的事件。代码处理，参考：java. 另外，因为在事件注册中，我们最常使用的就是事件对象，而IE8以下的浏览器中获取这个对象的方法与主流浏览器略有不同，所以也可以写入到整个span中浏览器处理事件：jquery

写js最常见的场景就是不断兼容各个版本的浏览器。 其中，最令人沮丧的是IE系列。 虽然jquery前期解决了很多麻烦，但随着最近jquery逐渐淡出，原生兼容的方法就显得更加重要了。 javascript

1. 事件注册兼容：

众所周知，IE8是一个分水岭。 除IE8及其以下浏览器外，chrome和firefox基本都支持addEventListener的方法来注册事件，removeEventListener的方法来移除事件。

然而，在 IE8 中却并非如此，如下所示。 注册事件使用attachEvent，释放事件使用detachEvent。 因此，一些比较老的项目在维护或者增加新功能的时候，就得自己写一套兼容的事件。 代码处理，参考：java

var EventUtil = {
				addHandler:function(element,type,handler){
					//绑定事件
					//Chrome Firefox IE9等 addEventListener 
					//IE8及IE8如下的浏览器 attachEvent 
					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){
					//移除事件
					//Chrome Firefox IE9等 
					//IE8及IE8如下的浏览器 
					if(element.removeEventListener){
						element.removeEventListener(type,handler,false);
					}else if (element.detachEvent) {
						element.detachEvent("on"+type,handler);
					} else{
						element["on"+type] = handler
					}
				}
			}

2.Event对象的兼容性

另外，因为在事件注册中，我们最常使用的就是事件对象，而IE8以下的浏览器中获取这个对象的方法与主流浏览器略有不同，所以也可以写入到整个span中浏览器处理事件：jquery

getTarget: function(event) {
					return event.target || event.srcElement;
				},

3. 冒泡和默认行为控制的兼容性

在addEventListener中，另一个常用的技术是冒泡机制和对浏览器元素默认行为的控制。 这两种行为基于IE8也分为两类代码，所以也需要兼容：web

(1)防止起泡：

stopPropagation: function(event) {
					if(event.stopPropagation) {
						event.stopPropagation()
					} else {
						event.cancelBubble = true;
					}
				}

(2)取消默认行为：

preventDefault: function(event) {
					if(event.preventDefault) {
						event.preventDefault();
					} else {
						event.returnValue = false;
					}
				}

4. 最终整合

关于整个js时间的跨浏览器处理，可以抽象成一个对象来封装，最终代码如下：chrome

var EventUtil = {
				addHandler: function(element, type, handler) {
					//绑定事件
					//Chrome Firefox IE9等 addEventListener 
					//IE8及IE8如下的浏览器 attachEvent 
					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) {
					//移除事件
					//Chrome Firefox IE9等 
					//IE8及IE8如下的浏览器 
					if(element.removeEventListener) {
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent) {
						element.detachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler
					}
				},
				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;
					}
				}