自己的js工具 Event封裝
更新時(shí)間:2009年08月21日 01:46:18 作者:
說到瀏覽器中的event,相信不少人都很頭疼,ie的event大部分時(shí)候都可以獲取到
因?yàn)閕e的event是全局的而firefox的event是局部的,用起來不太方便,這個(gè)時(shí)候我們就要自己組裝一下常用的event操作了,封裝成類便于重用
/**
類 Event
用法:
Event.getEvent();獲取 ie,firefox的event
Event.getTarget();獲取ie的srcElement或firefox的target
Event.isIe();是否為ie
Event.clientX(); 獲取ie,fox的鼠標(biāo)x坐標(biāo)
Event.clientY();獲取 ie,fox的鼠標(biāo)y坐標(biāo)
*/
var Event=new function(){
this.toString=function(){
return this.getEvent();
}
//獲取 事件
this.getEvent=function(){
var ev=window.event;
if(!ev){
var c=this.getEvent.caller;
while(c){
ev=c.arguments[0];
if(ev && Event ==ev.constructor)
break;
c=c.caller;
}
}
return ev;
};
//獲取 事件源
this.getTarget=function(){
var ev=this.getEvent();
return this.isIe()?ev.srcElement:ev.target;
}
//是否為ie
this.isIe=function(){
return document.all?true:false;
}
//鼠標(biāo)x坐標(biāo)
this.clientX=function(){
var ev=this.getEvent();
var x=this.isIe()?ev.clientX:ev.pageX;
return x;
}
//鼠標(biāo)y坐標(biāo)
this.clientY=function(){
var ev=this.getEvent();
var y=this.isIe()?ev.clientY:ev.pageY;
return y;
}
/**增加事件(對(duì)象,事件類型,函數(shù)指針 )
obj: html對(duì)象
sEvent: 事件名稱
spNotify: 事件執(zhí)行的方法
isCapture:是否允許全屏捕捉
*/
this.addEvent=function(obj,sEvent,fpNotify,isCapture){
sEvent=sEvent.indexOf("on")!=-1?sEvent:"on"+sEvent;
if(obj.addEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on")+2);
obj.addEventListener(sEvent,fpNotify,isCapture);
}else{ //ie
if(isCapture)
obj.setCapture(isCapture);
obj.attachEvent(sEvent,fpNotify);
}
}
//移除事件
this.removeEvent=function(obj,sEvent,fpNotify){
if(obj.removeEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on")+2)
obj.removeEventListener(sEvent,fpNotify,false);
}else{
obj.detachEvent(sEvent,fpNotify);
}
}
//獲取鼠標(biāo)按鍵,left=1,middle=2,right=3
this.button=function(){
var ev=this.getEvent();
if(!ev.which&&ev.button){//ie
return ev.button&1?1:(ev.button&2?3:(ev.button&4?2:0))
}
return ev.which;
};
//阻止事件冒泡傳遞
this.stopPropagation=function(){
var ev=this.getEvent();
if(this.isIe)
ev.cancelBubble=true;
else
ev.stopPropagation();
}
//阻止默認(rèn)事件返回
this.preventDefault=function(){
var ev=this.getEvent();
if(this.isIe)
ev.returnValue=false;
else
ev.preventDefault();
}
}
復(fù)制代碼 代碼如下:
/**
類 Event
用法:
Event.getEvent();獲取 ie,firefox的event
Event.getTarget();獲取ie的srcElement或firefox的target
Event.isIe();是否為ie
Event.clientX(); 獲取ie,fox的鼠標(biāo)x坐標(biāo)
Event.clientY();獲取 ie,fox的鼠標(biāo)y坐標(biāo)
*/
var Event=new function(){
this.toString=function(){
return this.getEvent();
}
//獲取 事件
this.getEvent=function(){
var ev=window.event;
if(!ev){
var c=this.getEvent.caller;
while(c){
ev=c.arguments[0];
if(ev && Event ==ev.constructor)
break;
c=c.caller;
}
}
return ev;
};
//獲取 事件源
this.getTarget=function(){
var ev=this.getEvent();
return this.isIe()?ev.srcElement:ev.target;
}
//是否為ie
this.isIe=function(){
return document.all?true:false;
}
//鼠標(biāo)x坐標(biāo)
this.clientX=function(){
var ev=this.getEvent();
var x=this.isIe()?ev.clientX:ev.pageX;
return x;
}
//鼠標(biāo)y坐標(biāo)
this.clientY=function(){
var ev=this.getEvent();
var y=this.isIe()?ev.clientY:ev.pageY;
return y;
}
/**增加事件(對(duì)象,事件類型,函數(shù)指針 )
obj: html對(duì)象
sEvent: 事件名稱
spNotify: 事件執(zhí)行的方法
isCapture:是否允許全屏捕捉
*/
this.addEvent=function(obj,sEvent,fpNotify,isCapture){
sEvent=sEvent.indexOf("on")!=-1?sEvent:"on"+sEvent;
if(obj.addEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on")+2);
obj.addEventListener(sEvent,fpNotify,isCapture);
}else{ //ie
if(isCapture)
obj.setCapture(isCapture);
obj.attachEvent(sEvent,fpNotify);
}
}
//移除事件
this.removeEvent=function(obj,sEvent,fpNotify){
if(obj.removeEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on")+2)
obj.removeEventListener(sEvent,fpNotify,false);
}else{
obj.detachEvent(sEvent,fpNotify);
}
}
//獲取鼠標(biāo)按鍵,left=1,middle=2,right=3
this.button=function(){
var ev=this.getEvent();
if(!ev.which&&ev.button){//ie
return ev.button&1?1:(ev.button&2?3:(ev.button&4?2:0))
}
return ev.which;
};
//阻止事件冒泡傳遞
this.stopPropagation=function(){
var ev=this.getEvent();
if(this.isIe)
ev.cancelBubble=true;
else
ev.stopPropagation();
}
//阻止默認(rèn)事件返回
this.preventDefault=function(){
var ev=this.getEvent();
if(this.isIe)
ev.returnValue=false;
else
ev.preventDefault();
}
}
相關(guān)文章
OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼,有需要的朋友可以參考一下2013-12-12
JavaScript對(duì)象引用與賦值實(shí)例詳解
這篇文章主要介紹了JavaScript對(duì)象引用與賦值,結(jié)合實(shí)例形式分析了JavaScript對(duì)象引用及賦值的操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
JavaScript寫個(gè)貪吃蛇小游戲(超詳細(xì))
這篇文章主要介紹了JavaScript寫個(gè)貪吃蛇小游戲(超詳細(xì)),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03

