常用跨浏览器事件封装
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 };
如果还有什么常用的确没有想到的可以自己再向里面添加。