跨浏览器的事件侦听器和事件对象
今天特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结，并把这些方法打包。
打包的一个EventUtil对象
1 var EventUtil = { 2 // 添加侦听事件 3 addEventListener:function (element, type, handler) { 4 // IE9+、Firefox、Safari、chrome和Opera 5 if(element.addEventListener) { 6 element.addEventListener(type, handler, false); 7 } 8 // IE8- 9 else if(element.attachEvent) { 10 element.attachEvent("on" + type, handler); 11 } 12 }, 13 14 // 移除侦听事件 15 removeEventListener:function (element, type, handler) { 16 // IE9+、Firefox、Safari、chrome和Opera 17 if(element.addEventListener) { 18 element.removeEventListener(type, handler, false); 19 } 20 // IE8- 21 else if(element.attachEvent) { 22 element.detachEvent("on" + type, handler); 23 } 24 }, 25 26 // 获取事件对象 27 getEvent:function(event) { 28 if(typeof event == "undefined") { 29 event = window.event; // IE浏览器 30 } 31 return event; 32 }, 33 34 // 获取触发事件的元素 35 getTarget:function(event){ 36 if(typeof event.srcElement == "undefined") { 37 return event.target; 38 }else { 39 return event.srcElement; // IE浏览器 40 } 41 }, 42 43 // 获取事件类型 44 getType:function(event) { 45 return event.type; 46 }, 47 48 // 获取按键键码 49 getCharCode:function(event) { 50 if(typeof event.keyCode == "number") { 51 return event.keyCode; // IE8-、Firefox和opera 52 }else { 53 return event.charCode; 54 } 55 }, 56 57 // 获取鼠标相对于文档的位置,即页面坐标位置 58 getPagePosition:function(event) { 59 var pageX = event.pageX, 60 pageY = event.pageY; 61 if(pageX == undefined) { 62 pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); 63 } 64 if(pageY == undefined) { 65 pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); 66 } 67 return { 68 pageX:pageX, 69 pageY:pageY 70 }; 71 }, 72 73 // 阻止事件的默认行为 74 preventDefault:function(event) { 75 if(event.preventDefault){ 76 event.preventDefault(); 77 }else { 78 event.returnValue = false; // IE浏览器 79 } 80 }, 81 82 // 阻止事件冒泡 83 stopPropagation:function(event) { 84 if(typeof event.cancelBubble == "undefined") { 85 event.stopPropagation(); 86 }else { 87 event.cancelBubble = true; // IE浏览器 88 } 89 } 90 };
测试代码
1 <div id="box" style="color:red;width: 100%;height:200px;" > 2 <input type="button" value="点击" id="btn" /> 3 </div> 4 <a href="http://www.test.com" id="a">test</a>
1 var box = document.querySelector("#box"); 2 box.onclick = function(event) { 3 event = EventUtil.getEvent(event); 4 alert(EventUtil.getType(event)); 5 alert(EventUtil.getTarget(event)); 6 }; 7 var input = document.querySelector("input"); 8 input.onclick = function(event) { 9 event = EventUtil.getEvent(event); 10 EventUtil.stopPropagation(event); 11 }; 12 13 var a = document.getElementById("a"); 14 a.onclick = function(event) { 15 event = EventUtil.getEvent(event); 16 EventUtil.preventDefault(event); 17 };
