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

2023-08-03 2054阅读

写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-跨浏览器处理事件

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

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

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

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

(1)防止起泡:

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

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;
					}
				}

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]