封装常用的跨浏览器的事件对象EventUtil
var EventUtil = {
addHandler: 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;
}
},
removeHandler: 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) {//获取event对象,返回event对象的引用
return event ? event : window.event;
},
getTarget: 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;
}
},
getRelatedTarget: function(event){//返回相关元素信息(仅对于mouseover和mouseout事件)
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getWheelDelta: function(event) {//获取鼠标滚轮增量值,检测是否包含WheelDelta
if(event.wheelDelta) {
return event.wheelDelta;
}else {
return -event.detail * 40
}
},
getCharCode: function(event) {//获取键盘按键键码。
if(typeof event.charCode == 'number') {
return event.charCode;
}else {
return event.keyCode;
}
},
getButton:function(event){//在mouseup或者mousedown的时候,event存在一个button属性,用于判断是按了鼠标左键,右键,还是中键,0鼠标主键按钮,1是中间,2是次键(右键)
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;
}
}
}
};
封装常用的跨浏览器的事件对象EventUtil的更多相关文章
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- 跨浏览器的事件对象EventUtil
var EventUtil = function(){ /*--addHandler--*/ addHandler:function(element,type,handler){ if(element ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- Javascript跨浏览器的事件对象
一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- javaScript之跨浏览器的事件对象
跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...
- js实现一些跨浏览器的事件方法
用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
随机推荐
- 关于Relay的麻烦之处
问题背景 由于QueryRender是直接将数据塞进Render()里的 handleUpdate = (hasNextPage, xdata) =>{ console.log(3); cons ...
- asp.net core + 前端H5 页面视频站制作尝试
.net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...
- iOS检测项目图片资源是否包含P3图片
1.问题描述 我们需要知道的是在iOS9.3以下系统上,.ipa包内如果含有p3图片,将会导致严重的闪退问题,具体原因还请google,非本文的重点. 2.问题解决 拿到的如果是ipa包(不是则跳过) ...
- CentOS6.9 minimal版本安装图形化界面
CentOS6.9 minimal版本安装图形化界面 安装步骤如下: 1.安装Desktop组 # yum groupinstall "Desktop" -y 2.安装X Wind ...
- input 实现onchange效果
$(".selected input").on('input',function(e){ cc.search(); });
- Vim查找与替换
\c 忽略大小写 \C 强制区分大小写 \v 除了_.字母.数字以为的所有字符都当做具有特殊含义的字符 \V 只有反斜杠有特殊含义 %s///gn 统计某个词出现的次数 替换的flag g 全局范围执 ...
- 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能(附源代码详解和下载)
C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
- php-elasticsearch scroll分页详解
背景 ps:首先我们在一个索引里面写入一万条以上的数据.作为数据源 现在我想看到第一万零一条数据,首先第一想法是,from 10000 size 1 ,这样做会包下面错误.显然是不成立的.此时便会用到 ...
- Linux rsync 企业级应用
简介 rsync 是 Linux 下的数据同步工具, 其支持本地同步和远程同步, 远程同步分为 daemon 和 ssh 同步方式 rsync 可以代替 cp, scp 等命令, 且具有更高的可 ...
- XMPP Authentication
From: http://www.ietf.org/rfc/rfc2831.txt 2 Authentication The following sections describe how to ...