自己的js工具 Event封装

 更新时间:2009年08月21日 01:46:18   作者:  
说到浏览器中的event,相信不少人都很头疼,ie的event大部分时候都可以获取到
因为ie的event是全局的而firefox的event是局部的,用起来不太方便,这个时候我们就要自己组装一下常用的event操作了,封装成类便于重用
复制代码 代码如下:

/**
类 Event
用法:
Event.getEvent();获取 ie,firefox的event
Event.getTarget();获取ie的srcElement或firefox的target
Event.isIe();是否为ie
Event.clientX(); 获取ie,fox的鼠标x坐标
Event.clientY();获取 ie,fox的鼠标y坐标
*/
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;
}
//鼠标x坐标
this.clientX=function(){
var ev=this.getEvent();
var x=this.isIe()?ev.clientX:ev.pageX;
return x;
}
//鼠标y坐标
this.clientY=function(){
var ev=this.getEvent();
var y=this.isIe()?ev.clientY:ev.pageY;
return y;
}
/**增加事件(对象,事件类型,函数指针 )
obj: html对象
sEvent: 事件名称
spNotify: 事件执行的方法
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);
}
}
//获取鼠标按键,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();
}
//阻止默认事件返回
this.preventDefault=function(){
var ev=this.getEvent();
if(this.isIe)
ev.returnValue=false;
else
ev.preventDefault();
}
}

相关文章

  • 原生javascript实现匀速运动动画效果

    原生javascript实现匀速运动动画效果

    这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Bootstrap页面布局基础知识全面解析

    Bootstrap页面布局基础知识全面解析

    Bootstrap作为支持响应式布局的一个前端插件,发挥着非常重要的作用,下面通过本文给大家介绍Bootstrap页面布局基础知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • Javascript attachEvent传递参数的办法

    Javascript attachEvent传递参数的办法

    找了半天找到的解决办法,看介绍说是javascript的闭包问题,导致得不能直接读取外部的那个函数,不然就所有传递的参数都变为最后一个了。
    2009-12-12
  • 微信小程序利用swiper+css实现购物车商品删除功能

    微信小程序利用swiper+css实现购物车商品删除功能

    这篇文章主要介绍了微信小程序利用swiper+css实现购物车商品删除功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 微信小程序实现列表项上移下移效果

    微信小程序实现列表项上移下移效果

    这篇文章主要为大家详细介绍了微信小程序实现列表项上移下移效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript数组去重小结

    javascript数组去重小结

    本文给大家汇总介绍了javascript中数组去重的4种方法,分别是循环匹配去重,JSON去重/对象去重/字典去重,队列递归去重,INDEXOF去重方式,非常的细致全面,有需要的小伙伴可以参考下。
    2016-03-03
  • 微信小程序实现分享朋友圈的图片功能示例

    微信小程序实现分享朋友圈的图片功能示例

    这篇文章主要介绍了微信小程序实现分享朋友圈的图片功能,结合实例形式分析了微信小程序实现分享到朋友圈功能的具体操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript与Image加载事件(onload)、加载状态(complete)

    JavaScript与Image加载事件(onload)、加载状态(complete)

    以前写过一个图片等比缩放的Js函数,缺陷是要等到所有图片都加载完毕了,才能进行等比缩放。
    2011-02-02
  • JS控制HTML元素的显示和隐藏的两种方法

    JS控制HTML元素的显示和隐藏的两种方法

    本文给大家分享两种方法来控制html元素的显示和隐藏,分别利用html的style中两个属性,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • js或jquery实现页面打印可局部打印

    js或jquery实现页面打印可局部打印

    这篇文章主要介绍了js或jquery如何实现页面打印也可局部打印,需要的朋友可以参考下
    2014-03-03

最新评论