js实现的通用兼容低版本IE浏览器的事件注册和删除
本章节分享一段代码实例,它实现了兼容低版本IE浏览器的事件各种处理的封装。
比如事件处理函数注册、删除、阻止默认动作或者事件冒泡等功能。
代码实例:
var eventUtil ={
addEvent: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;
}
},
removeEvent: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;
},
getType:function(event){
return event.type;
},
getElement: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;
}
}
}
上面实现了事件各种功能的封装,下面对它的实现过程进行一下注释。
一.代码注释:
(1).var eventUtil ={},以对象直接量的方式进行封装。
(2).addEvent:function(element,type,handler){},为元素注册事件处理函数,第一个参数是要注册事件处理函数的元素对象,第二个参数是事件类型,不带"on",第三个参数是事件处理函数。
(3).if (element.addEventListener) {
element.addEventListener(type,handler,false);
}
else if (element.attachEvent) {
element.attachEvent('on'+type,handler);
}
else{
element['on'+type] = handler;
},首先判断是否支持标准的事件注册方式,如果支持就使用addEventListener(),再判断是否支持低版本IE浏览器的方式,如果支持则使用attachEvent(),否则就是用element['on'+type] = handler,其实也就是类似element.onclick=handler这种方式,其实后面的原理也是都是一样的。
(1).addEventListener()方法可以参阅addEventListener()一章节。
(2).attachEvent()方法可以参阅javascript attachEvent()一章节。
(3).removeEventListener()方法可以参阅removeEventListener()方法和detachEvent()方法用法一章节。
(4).事件对象兼容可以参阅var ev=window.event||ev的作用是什么一章节。
(5).target属性可以参阅javascript event.target一章节。
(6).preventDefault()方法可以参阅javascript preventDefault()一章节。
(7).stopProPagation()方法可以参阅javascript stopPropagation()一章节。
相关推荐
-
兼容低版本IE浏览器的DOMContentLoaded事件
用过jQury的朋友一定对$(documnt).ry(function(){})不会陌生。它的作用是当文档结构加载完毕就会触发事件,其实就是对DOMContntLodd事件的封装。下面是
-
javascript为什么字符串直接量可以使用属性和方法
在分析标题中的问题之前先来看一段代码实例:vr str=实例3;consol.log(str.lngth);如果不深究,那么上面的代码实在是太普通不过了,但是细致看来,可能有不少朋友有
-
js将数组转换成CSV格式的方法简单介绍
本章节介绍一下如何将数组转换为csv格式,需要的朋友可以做一下参考。关于什么是csc格式可以自行在网上查询,非常的简单也很好理解。jvScrit中数组对象的vluOf方法可以将数组的值输出为
-
js使用yield模拟多线程的方法简单介绍
在ython和C#中都有yild方法,通过yild可以实现很多多线程才能实现的功能。jvscrit有版本要求:JvScrit 1.7function Thrd( nm ) {
-
JavaScript 事件委托或者事件代理介绍
本章节介绍一下标题标题中的事件委托这个概念和它的相关用法,代理也是一种叫法之一。其实从名称就可以看出事件委托其实就是自己的事情交给别人去干,下面就做一下介绍。下面是一个li元素列表:ul id=l