js高级程序设计之跨浏览器事件处理
//事件
var EventUtil = {
//添加事件
addHandler:function (element, type, handler) { //element:DOM对象,type:事件类型,handler:事件函数
if (element.addEventListener) {
//是否存在DOM2级方法
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
//IE方法,不过IE中的作用域是全局性的
element.attachEvent("on" + type, handler);
} else {
//DOM0级方法
element["on" + type] = handler;
}
},
//获取DOM event对象或者IE event对象
getEvent:function (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;
}
},
//移除事件
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;
}
},
//阻止事件冒泡
stopPropagation:function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
//mouseout,mouseover相关元素
getRelatedTarget:function (event) {
if (event.relatedTarget) {
//DOM的event对象的relatedTarget
return event.relatedTarget;
} else if (event.toElement) {
//IE mouseout事件触发时,toElement代表相关元素
return event.toElement;
} else if (event.fromElement) {
//IE mouseover事件触发时,fromElement代表相关元素
return event.fromElement;
} else {
return null;
}
},
//鼠标按钮
getButton:function (event) {
//因为DOM版与iE版同名,需通过hasFeature()方法检测
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
//IE event.button
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") {
//非IE在keypress事件时charCode代表那个键的ASCII值
//在不支持此属性的浏览器中,值为undefined
return event.charCode;
} else {
// for IE
return event.keyCode;
}
},
//获取鼠标滚轮数值判断方向
//向上滚动数值为正,是120的倍数
//向下滚动数值为负
getWheelDelta:function (event) {
if (event.wheelDelta) {
//IE,opera 9.5以后,chrome,safari支持事件类型mousewheel
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
//Firefox支持事件类型DOMMouseScroll
return -event.detail * 40;
}
},
//获取剪贴板数据
/** etc:
* EventUtil.addHandler(textbox,"paste",function(event){
* event.EventUtil.getEvent(event);
* var text=EventUtil.getClipboardText(event);
* if(!/^\d*$/.test(text)){
* EventUtil.preventDefault(event);
* });
* 只有数值才会被粘贴到文本框
*/
getClipboardText:function (event) {
var clipboardData = (event.clipboardData || window.clipboardData); //for Safari,Chrome or IE
return clipboardData.getData("text");
},
//设置剪贴板数据
/**
* etc:
* EventUtil.addHandler(textbox,"copy",function(event){
* event.EventUtil.getEvent(event);
* EventUtil.preventDefault(event);
* EventUtil.setClipboardText(event,"Hello world");
* });
* @param event
* @param value
* @return {*}
* 不会将文本框中的文本复制到剪贴板
*/
setClipboardText:function (event, value) {
if (event.clipboardData) {
//for Chrome.Safari
return event.clipboardData.setData("text/plain", value);
} else {
//for IE
return window.clipboardData.setData("text", value);
}
}
};
转载于:https://www.cnblogs.com/webFrontDev/archive/2012/11/04/2753483.html
js高级程序设计之跨浏览器事件处理相关推荐
- js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象 在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
- 《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
- Ext JS高级程序设计
Ext JS高级程序设计 图书详细情况查看: http://www.china-pub.com/193076 市场价 :¥59.00 会员价 : ¥44.25(75折) [作 者]黄灯桥;徐会生 [同 ...
- JS高级程序设计【红宝书】学习笔记——数据类型
目录 数据类型 Number类型 1.值的范围 2.NaN 3.数值转换 String类型 1.字符字面量(详见JS高级程序设计P63 2.转换为字符串 Symbol类型 Object类型 objec ...
- 读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
- Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性 任何支持style特性的HTML元素都有一 ...
- JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四 第六章 集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
- JS高级程序设计拾遗
<JavaScript高级程序设计(第三版)>反反复复看了好多遍了,这次复习作为2017年上半年的最后一次,将所有模糊的.记不清的地方记录下来,方便以后巩固. 0. <script& ...
- js高级程序设计(一) —— js简介
学习<JavaScript高级程序设计>的知识总结,以及对部分内容的扩展~ 1.一个完整的js实现的三个部分 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ...
最新文章
- 微信小程序 html css xml,微信小程序 使用towxml解析html流程及踩坑记录
- Python:更改默认启动的python程序及其对应的安装包路径(更改pip的默认安装包的路径)图文教程之详细攻略
- 北邮OJ 255. 奇偶求和-软件14 2014年北京邮电大学软件工程学院研究生复试
- python学习实例(5)
- mysql的where字句调优_mysql中select和where子句优化的总结
- 一站式实时数仓开发:当FLINK SQL遇见ULTRON
- 运行VINS-mono:/home/tony-ws1/output/pose_graph/ not exists, trying to create it /home/tony-ws1/ou错误解决
- 46. Permutations 1
- 概率论-随机事件及其概率
- mysql出错代码表
- Swift3.0朝圣之路-Then协议库-绝妙的初始化方式
- 基于linux的进程调度模拟程序,2011180021_Linux操作系统_课程设计报告_基于Linux的进程调度模拟程序...
- wps画 ui 原型图
- 用正则表达式清除各类符号
- 共享远程计算机文件夹,怎么远程访问共享文件夹
- 资源 就是Tianmao项目里小部分备用 测试 的数据以及图片
- iOS小技能:常用预处理指令(移除程序中的identifier、发布模式关闭NSLog、导出和隐藏符号)
- 树莓派4B刷openwrt软路由系统,树莓派做有线路由器的扩展实现各种自定义操作
- PCB原理图绘制(种草立创eda)
- 国内外常见DNS汇总 (更新:201904)