博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
常用跨浏览器事件封装
阅读量:4634 次
发布时间:2019-06-09

本文共 5179 字,大约阅读时间需要 17 分钟。

1 /**  2  * @author [xiaoruo]  3  * [EventUtil 跨浏览器事件对象]  4  * @type {Object}  5  */  6 var EventUtil = {  7     /**  8      * [addHandler 添加跨浏览器事件]  9      * @param {[Object]} element [事件对象] 10      * @param {[String]} type    [事件类型] 11      * @param {[Function]} handler [事件函数] 12      */ 13     addHandler: function(element, type, handler) { 14         if (element.addEventListener) { 15             element.addEventListener(type, handler, false); 16         } else if (element.attachEvent) { 17             element.attachEvent("on" + type, handler); 18         } else { 19             element["on" + type] = handler; 20         } 21     }, 22  23     /** 24      * [removeHandler 移除事件] 25      * @param {[Object]} element [事件对象] 26      * @param {[String]} type    [事件类型] 27      * @param {[Function]} handler [事件函数] 28      */ 29     removeHandler: function(element, type, handler) { 30         if (element.removeEventListener) { 31             element.removeEventListener(type, handler, false); 32         } else if (element.detachEvent) { 33             element.detachEvent("on" + type, handler); 34         } else { 35             element["on" + type] = null; 36         } 37     }, 38  39     /** 40      * [getEvent 跨浏览器事件] 41      * @param  {[Object]} event [事件对象] 42      * @return {[Object]}       [事件对象] 43      */ 44     getEvent: function(event) { 45         return event ? event : window.event; 46     }, 47  48     /** 49      * [getTarget 事件目标] 50      * @param  {[Object]} event [事件对象] 51      * @return {[Object]}       [事件目标] 52      */ 53     getTarget: function(event) { 54         return event.target || event.srcElement; 55     }, 56  57     /** 58      * [getRelatedTarget 与事件目标相关的节点]这个属性只对mouseover和mouseout有用(mouseover是离开的那个节点或mouseout时进入的那个节点) 59      * @param  {[Object]} event [事件对象] 60     * @return {[Object]}       [相关节点] 61      */ 62     getRelatedTarget: function(event) { 63         if (event.relatedTarget) { 64             return event.relatedTarget; 65         } else if (event.toElement) { 66             return event.toElement; 67         } else if (event.fromElement) { 68             return event.fromElement; 69         } else { 70             return null; 71         } 72  73     }, 74  75     /** 76      * [preventDefault 取消默认事件] 77      * @param  {[Object]} event [事件对象] 78      */ 79     preventDefault: function(event) { 80         if (event.preventDefault) { 81             event.preventDefault(); 82         } else { 83             event.returnValue = false; 84         } 85     }, 86  87     /** 88      * [stopPropagation 取消事件的冒泡或捕获行为] 89      * @param  {[Object]} event [事件对象] 90      */ 91     stopPropagation: function(event) { 92         if (event.stopPropagation) { 93             event.stopPropagation(); 94         } else { 95             event.cancelBubble = true; 96         } 97     }, 98  99 100     /**101      * [getCharCode 获取键盘码]102      * @param  {[Object]} event [事件对象]103      * @return {[number]}       [键盘码]104      */105     getCharCode: function(event) {106         if (typeof event.charCode == "number") {107             return event.charCode;108         } else {109             return event.keyCode;110         }111     },112 113     /**114      * [getButton 获取鼠标按键]115      * @param  {[Object]} event [事件对象]116      */117     getButton: function(event) {118         if (document.implementation.hasFeature("MouseEvents", "2.0")) {119             return event.button;120         } else {121             switch (event.button) {122                 case 0://没有按下按钮123                 case 1://按下主鼠标按钮124                 case 3://同时按下主次鼠标按钮125                 case 5://同时按下主中间126                 case 7://同时按下三个127                     return 0;//主128                 case 2://按下了次鼠标按钮129                 case 6://同时按下次中间130                     return 2;//中间131                 case 4://按下鼠标中间按钮132                     return 1;//次133             }134         }135     },136 137     /**138      * [getWheelDelta 鼠标滚轮事件]139      * @param  {[Object]} event [事件对象]140      * @return {[Number]}       [鼠标滚轮数值]上滚为正下滚为负141      */142     getWheelDelta: function(event) {143         if (event.wheelDelta) {144             return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);145         } else {146             return -event.detail * 40;147         }148     },149 150 151     /**152      * [getClipboardText 获取剪切板数据]153      * @param  {[Object]} event [事件对象]154      * @return {[String]}       [剪切板数据]155      */156     getClipboardText: function(event) {157         var clipboardData = (event.clipboardData || window.clipboardData);158         return clipboardData.getData("text");159     },160 161 162     /**163      * [setClipboardText 为剪切板赋予数据]164      * @param  {[Object]} event [事件对象]165      */166     setClipboardText: function(event, value) {167         if (event.clipboardData) {168             event.clipboardData.setData("text/plain", value);169         } else if (window.clipboardData) {170             window.clipboardData.setData("text", value);171         }172     }173 };

如果还有什么常用的确没有想到的可以自己再向里面添加。

转载于:https://www.cnblogs.com/xiaoruo/p/4479865.html

你可能感兴趣的文章
PHP 如何判断当前用户已在别处登录
查看>>
Join
查看>>
Java 5种字符串拼接方式(性能比较)
查看>>
PWE
查看>>
PHP多线程的实现(PHP多线程类)
查看>>
人生不只是上坡路
查看>>
vim的安装和配置
查看>>
k8s实战之从私有仓库拉取镜像 - kubernetes
查看>>
centos7硬盘分区
查看>>
chrome扩展之3:一步步跟我学开发一个表单填写扩展
查看>>
Socket、Http、TCP/IP、UDP的联系与区别
查看>>
包装函数
查看>>
原理系列:Spark1.x 生态圈一览
查看>>
django模板系统(下)
查看>>
HDU 1711 Number Sequence(KMP模板)
查看>>
如何查看Ubuntu版本
查看>>
本杰明 富兰克林 道德13准则
查看>>
JAVA 操作系统已经来到第五个版本了 现陆续放出三个版本 这是第二个版本
查看>>
LightOJ 1370 Bi-shoe and Phi-shoe(欧拉函数)
查看>>
C#指南,重温基础,展望远方!(4)表达式
查看>>