1.添加事件方法
1 addHandler:function(element,type,handler){2 if(element.addEventListener){ //检测是否为DOM2级方法3 element.addEventListener(type, handler, false);4 }else if (element.attachEvent){ //检测是否为IE级方法5 element.attachEvent("on" + type, handler);6 } else { //检测是否为DOM0级方法7 element["on" + type] = handler;8 }9 }
2.移除之前添加的事件方法
1 removeHandler:function(element, type, handler){2 if (element.removeEventListener){3 element.removeEventListener(type, handler, false);4 } else if (element.detachEvent){5 element.detachEvent("on" + type, handler);6 } else {7 element["on" + type] = null;8 }9 }
3.获取事件及事件对象目标
1 //获取事件对象的兼容性写法2 getEvent: function(event){3 return event ? event : window.event;4 },5 //获取事件对象目标的兼容性写法6 getTarget: function(event){7 return event.target || event.srcElement;8 }
4.阻止浏览器默认事件的兼容性写法
1 preventDefault: function(event){2 if (event.preventDefault){3 event.preventDefault();4 } else {5 event.returnValue = false;6 }7 }
5.阻止事件冒泡的兼容性写法
1 stopPropagation: function(event){2 if (event.stopPropagation){3 event.stopPropagation();4 } else {5 event.cancelBubble = true;6 }7 }
6.mouseover和mouseout 事件才包含的获取相关元素的方法
1 //mouseover和mouseout 事件才包含的获取相关元素的方法 2 getRelatedTarget: function(event){ 3 if (event.relatedTarget){ 4 return event.relatedTarget; 5 } else if (event.toElement){ 6 return event.toElement; 7 } else if (event.fromElement){ 8 return event.fromElement; 9 } else {10 return null;11 }12 }
7.鼠标滚轮判断
对于mousedown 和mouseup 事件来说,则在其event 对象存在一个button 属性,
表示按下或释放的按钮。DOM的button 属性可能有如下3 个值:0 表示主鼠标按钮,1 表示中间的鼠标按钮(鼠标滚轮按钮),2 表示次鼠标按钮。在常规的设置中,主鼠标按钮就是鼠标左键,而次鼠标按钮就是鼠标右键。IE8 及之前版本也提供了button 属性,但这个属性的值与DOM 的button 属性有很大差异。 0:表示没有按下按钮。 1:表示按下了主鼠标按钮。 2:表示按下了次鼠标按钮。 3:表示同时按下了主、次鼠标按钮。 4:表示按下了中间的鼠标按钮。 5:表示同时按下了主鼠标按钮和中间的鼠标按钮。 6:表示同时按下了次鼠标按钮和中间的鼠标按钮。 7:表示同时按下了三个鼠标按钮。1 getButton: function(event){ 2 if (document.implementation.hasFeature("MouseEvents", "2.0")){ 3 return event.button; 4 } else { 5 switch(event.button){ 6 case 0: 7 case 1: 8 case 3: 9 case 5:10 case 7:11 return 0;12 case 2:13 case 6:14 return 2;15 case 4:16 return 1;17 }18 }19 }
8.能够取得鼠标滚轮增量值(delta)的方法
1 getWheelDelta: function(event){2 if (event.wheelDelta){3 return (client.engine.opera && client.engine.opera < 9.5 ?4 -event.wheelDelta : event.wheelDelta);5 } else {6 return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚7 }8 }
9.跨浏览器的方式取得字符编码
1 getCharCode: function(event){2 if (typeof event.charCode == "number"){3 return event.charCode;4 } else {5 return event.keyCode;6 }7 }
10.访问剪贴板中的数据
1 getClipboardText: function(event){2 var clipboardData = (event.clipboardData || window.clipboardData);3 return clipboardData.getData("text");4 }
11.设置剪贴板中的数据
1 setClipboardText: function(event, value){2 if (event.clipboardData){3 return event.clipboardData.setData("text/plain", value);4 } else if (window.clipboardData){5 return window.clipboardData.setData("text", value);6 }7 }