1 var EventUtil = {
 2     getEvent: function(event){       //获取事件对象
 3         return event ? event : window.event;
 4     },
 5     addHandler: function(element, type, handler){ //绑定事件
 6         if (element.addEventListener) {
 7                 element.addEventListener(type, handler, false);
 8         } else if (element.attachEvent) {
 9                 element.attachEvent("on" + type, handler);
10         } else {
11                 element["on" + type] = handler;
12
13         }
14     },
15     removeHandler: function(element, type, handler){   //移除绑定
16         if(element.removeEventListener){
17             element.removeEventListener(type,handler,false);
18         }else if(element.detachEvent){
19             element.detachEvent("on"+type,handler,false);
20         }else{
21             element["on"+type] = null;
22         }
23     },
24     preventDefault: function(event){   //阻止默认事件
25         if(event.preventDefault){
26             event.preventDefault();
27         }else{
28             event.returnValue = false;
29         }
30     },
31     stopPropagation: function(event){   //阻止事件冒泡
32         if (event.stopPropagation) {
33             event.stopPropagation();
34         }else{
35             event.cancelBubble = true;
36         }
37     },
38     getRelateTarget: function(event){ //事件相关元素的信息
39         if(event.relatedTarget){
40             return event.relatedTarget;
41         }else if(event.toElement){
42             event.toElement;
43         }else if(event.fromElement){
44             return event.fromElement;
45         }else{
46             return null;
47         }
48     },
49     getButton: function(event){  //检测button属性
50         if(document.implementation.hasFeature("MouseEvents","2.0")){
51             return event.button;
52         }else{
53             switch(event.button){
54                 case 0:
55                 case 1:
56                 case 3:
57                 case 5:
58                 case 7:
59                         return 0;//主鼠标按钮
60                 case 2:
61                 case 6:
62                         return 2;//次鼠标按钮
63                 case 4:
64                         return 1;//鼠标滚轮按钮
65             }
66         }
67     },
68     getWheelDelta: function(event){//鼠标滚动属性值
69         if(event.wheelDelta){
70             return (client.engine.opera && client.engine.opera <9.5  ? -event.wheelDelta:event.wheelDelta)
71         }else{
72             return -event.detail *40;
73         }
74     },
75     getCharCode: function(event){//获取字符编码
76         if(typeof event.charCode == "number"){
77             return event.charCode;
78         }else{
79             return event.keyCode;
80         }
81     },
82     getCilpboardText: function(event){//获取剪切板内容
83         var cilpboardData = (event.clipboardData || window.clipboardData);
84         return clipboardData.getData("text");
85     },
86     setClipboardText:function(event,value){//剪切到剪切板
87         if(event.clipboardData){
88             return event.clipboardData.setData("text/plain",value);
89         }else if(window.clipboardData){
90             return window.clipboardData.setData("text",value);
91         }
92     }
93
94
95 }

代码总结于《JavaScript高级程序设计》事件章节。

转载于:https://www.cnblogs.com/Jing-w/p/3922409.html

Js事件对象EventUtil相关推荐

  1. JS事件对象 (event)

    #事件对象 (event) div.onclick = function(event){         console.log(event);         let e = event||wind ...

  2. JS事件对象5--阻止默认事件(鼠标事件)

    阻止默认事件的两种方式和兼容方式: <script type="text/javascript">//阻止系统默认事件的两种方式://1.IE:return false ...

  3. [js] 事件对象 e.target offsetX clientX pageX

    鼠标相关事件 e.target 触发事件的标签对象 - e.target.innerText:点击标签的本文内容- e.target.tagName :点击标签的标签名称,标签名称是大写字符- e.t ...

  4. JS 事件对象 offsetX/Y clientX Y PageX Y

    offsetX Y clientX Y PageX Y   offsetX/Y,内部不要包含子标签 br换行

  5. jquery的事件对象

    jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装. screenX和screenY 对应屏幕最左上角的值 clientX和clientY 距离页面左上角的位置(忽略滚动条) ...

  6. 后处理程序文件大小的变量_【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?...

    关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...

  7. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = {// ...

  8. js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  9. js中获取事件对象的方法小结

    代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在htm ...

最新文章

  1. [JS] 题解:提取不重复的整数
  2. “12306” 是如何支撑百万 QPS 的?
  3. php中 datalist,html5 datalist标签的用法是什么?这里有datalist标签的用法实例
  4. r语言 not enough x observations_R基础知识
  5. 计算机专业 美国 硕士,【美国计算机硕士排名】美国计算机硕士专业怎么样
  6. shell脚本读取csv_shell script 处理 CSV 文件(Excel)
  7. OS / Linux / pthread_join() 和 pthread_detach() 函数区别
  8. left outer join 和 right outer join 和 join 的区别
  9. 计算机网络教学方式探讨论文,学生老师论文,关于关于高中计算机网络教学效率提升相关参考文献资料-免费论文范文...
  10. 1.24小时365天不间断服务 --- 服务器及基础设施搭建入门
  11. python学习资源分享
  12. Blender mmd 导出FBX模型 和 烘焙动画
  13. 软件工程项目分析(四) 瀚海星云新版网站 By 郭家华
  14. 织梦 帝国 php,PHPCMS、织梦DEDECMS、帝国CMS的抉择与比较
  15. 在网页中打开pdf、word、excel文件
  16. otherwise 用法
  17. 【Web技术】1154- 现代 Web 研发体系中的新一代低/零码搭建
  18. 【教程】记录:python基础爬虫代码(下载妹子福利图片)
  19. 如何让Java后端日志开发变得优雅
  20. 会考计算机资料,高中计算机会考选择题资料(全)

热门文章

  1. 关于TCP三次握手过程
  2. 以后台服务的形式启动nodejs应用
  3. java流程控制both_java web面试题
  4. 迷宫问题 (dfs)
  5. Deep-Clustering-for-Unsupervised-Learning-of-Visual-Features
  6. 习题3.3 线性表元素的区间删除 (20 分)
  7. 习题2.7 弹球距离 (15 分)
  8. 吴恩达深度学习5.2练习_Sequence Models_Operations on word vectors
  9. matlab 中一些对数组或矩阵的处理
  10. 计数排序(Counting sort)