公共事件处理函数js库

var EventUtil = {
/*
*添加事件处理 参数:元素对象 事件类型 处理函数
*/
addHandle: function (element, type, handle) {
//dom2级的事件添加
if (element.addEventListener) {
element.addEventListener(type, handle, false);
} else {
//IE 的事件添加
if (element.attachEvent) {
element.attachEvent('on' + type, handle);
} else {
//给元素特性赋值
element['on' + type] = handle;
}
}

},
/*
*移除事件处理 参数:元素对象 事件类型 处理函数
*/
removeHandle: function (element, type, handle) {
//dom2级的事件移除
if (element.removeEventListener) {
element.removeEventListener(type, handle, false);
} else {
//IE的事件移除
if (element.detachEvent) {
element.detachEvent('on' + type, handle);
} else {
//给元素特性赋值为空对象以移除事件
element['on' + type] = null;
}
}
},
//获得event对象 IE中以参数event对象传入 Dom中通过window.event来访问
getEvent: function (event) {
return event ? event : window.event;
},
//获得事件的目标 dom中通过event.target获得 IE中通过event.srcElement
getTarget: function (event) {
return event.target || event.srcElement;
},
//取消事件的默认行为
preventDefault: function (event) {
if (event.preventDefault) {
//Dom 方法
event.preventDefault();
} else {
//设置IE event.returnValue = false
event.returnValue = false;
}
},
//停止事件冒泡
stopPropagation: function (event) {
//Dom 方法
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;;
}
},
//获得相关目标对象
getRelatedTarget: function (event) {
//Dom 方法 relatedTarget只对mouseover和mouseout事件才包含值 否则 这个值为null
if (event.relatedTarget) {
return event.relatedTarget;
} else {
//IE
if (event.toElement) {
return event.toElement;
} else {
if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
}
}
},
//获得鼠标按键 0表示左键 1表示中间轮 2表示右键
getButton: function (event) {
//是否支持Dom鼠标事件
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
},
//获得字符编码
getCharCode: function (event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode;
}
}
};

转载于:https://www.cnblogs.com/sybboy/p/5710360.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个网页开发常用效果与框架,可以自定义导出自己想要的部分。 1.通过帮助文档help.html查看所有效果与使用方法。 2.通过config.html配置符合你需要并导出js; 内容包含如下: A:效果类; 1.事件-同时兼容手机与pc的3种事件(start、move、end); 2.tab选项卡-各种切换6种; 3.电商产品主图-横向与纵向2种; 4.放大镜-电商主图放大镜、图鼠标悬停旁边出现放大版图效果各一个; 5.跑马灯-文字或图片不断档可支持鼠标悬停时停止; 6.仿alert弹窗-可以自定义样式,手机版pc版个一种; 7.列表下拉加载更多-伪数据加载与ajax异步加载个一种; 8.折叠菜单一个; 9.banner图效果-7种包含手机上支持手指滑动的; 10.时间轴-控制1种; 11.自定义滚动条-横向、纵向各一种; 12.临时禁用滚动条-禁用与启用方法各一个,也能禁用手机滚动条,同时解决px滚动条占用宽度问题。 13.图表等比例-使图片始终保持设定比例缩放等供3种不同形式; 14.回到顶部-点击回到浏览器顶部; 15.漂浮窗-小漂浮窗广告; 16.图集展示-偶尔能用到; 17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出fixed定位问题处理!!!!!!; B:架构类; 1.流程控制-主要解决多个ajax调用依赖问题; 2.面向对象的class方法-方便定义类与集成类; 3.require-实现模块化开发,简单实用; 提示:用!!!!!!标注结尾的在某些场景下可能出现bug;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值