js實現(xiàn)的通用兼容低版本IE瀏覽器的事件注冊和刪除
本章節(jié)分享一段代碼實例,它實現(xiàn)了兼容低版本IE瀏覽器的事件各種處理的封裝。
比如事件處理函數(shù)注冊、刪除、阻止默認動作或者事件冒泡等功能。
代碼實例:
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;
}
}
}
上面實現(xiàn)了事件各種功能的封裝,下面對它的實現(xiàn)過程進行一下注釋。
一.代碼注釋:
(1).var eventUtil ={},以對象直接量的方式進行封裝。
(2).addEvent:function(element,type,handler){},為元素注冊事件處理函數(shù),第一個參數(shù)是要注冊事件處理函數(shù)的元素對象,第二個參數(shù)是事件類型,不帶"on",第三個參數(shù)是事件處理函數(shù)。
(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()一章節(jié)。
(2).attachEvent()方法可以參閱javascript attachEvent()一章節(jié)。
(3).removeEventListener()方法可以參閱removeEventListener()方法和detachEvent()方法用法一章節(jié)。
(4).事件對象兼容可以參閱var ev=window.event||ev的作用是什么一章節(jié)。
(5).target屬性可以參閱javascript event.target一章節(jié)。
(6).preventDefault()方法可以參閱javascript preventDefault()一章節(jié)。
(7).stopProPagation()方法可以參閱javascript stopPropagation()一章節(jié)。
相關推薦
-
兼容低版本IE瀏覽器的DOMContentLoaded事件
用過jQury的朋友一定對$(documnt).ry(function(){})不會陌生。它的作用是當文檔結構加載完畢就會觸發(fā)事件,其實就是對DOMContntLodd事件的封裝。下面是
-
javascript為什么字符串直接量可以使用屬性和方法
在分析標題中的問題之前先來看一段代碼實例:vr str=實例3;consol.log(str.lngth);如果不深究,那么上面的代碼實在是太普通不過了,但是細致看來,可能有不少朋友有
-
js將數(shù)組轉換成CSV格式的方法簡單介紹
本章節(jié)介紹一下如何將數(shù)組轉換為csv格式,需要的朋友可以做一下參考。關于什么是csc格式可以自行在網上查詢,非常的簡單也很好理解。jvScrit中數(shù)組對象的vluOf方法可以將數(shù)組的值輸出為
-
js使用yield模擬多線程的方法簡單介紹
在ython和C#中都有yild方法,通過yild可以實現(xiàn)很多多線程才能實現(xiàn)的功能。jvscrit有版本要求:JvScrit 1.7function Thrd( nm ) {
-
JavaScript 事件委托或者事件代理介紹
本章節(jié)介紹一下標題標題中的事件委托這個概念和它的相關用法,代理也是一種叫法之一。其實從名稱就可以看出事件委托其實就是自己的事情交給別人去干,下面就做一下介紹。下面是一個li元素列表:ul id=l















