以下方法兼容IE8-跨浏览器处理事件
温馨提示:这篇文章已超过376天没有更新,请注意相关的内容是否还可用!
写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; } }
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。