常用跨浏览器事件封装

  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 };