1 //事件的封装 2 var EventUtil = { 3 addHandler: function (element, type, handler) {//注册事件 4 if (element.addEventListener) {//非IE 5 element.addEventListener(type, handler, false); 6 } 7 else if (element.attachEvent) {//IE 8 element.attachEvent("on" + type, handler); 9 } 10 else {//dom0级 11 element["on" + type] = handler; 12 } 13 }, 14 removeHandler: function (element, type, handler) {//取消注册事件 15 if (element.removeEventListener) {//非IE 16 element.removeEventListener(type, handler, false); 17 } 18 else if (element.detachEvent) {//IE 19 element.detachEvent("on" + type, handler); 20 } 21 else {//dom0级 22 element["on" + type] = null; 23 } 24 }, 25 getEvent: function (event) {//返回event的引用 26 return event ? event : window.event; 27 }, 28 getTarget: function (event) {//返回鼠标单击的目标对象 29 return event.target || event.srcElement; 30 }, 31 preventDefault: function (event) {//取消默认事件(a的href,radio,checkbox,) 32 if (event.preventDefault) { 33 event.preventDefault(); 34 } 35 else { 36 event.returnValue = false; 37 } 38 }, 39 stopPropagation: function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡 40 if (event.stopPrapagation) { 41 event.stopPropagation(); 42 } 43 else { 44 event.cancelBubble = true; 45 } 46 }, 47 getRelatedTarget: function (event) {//获取相关元素 48 /* 49 页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body. 50 mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素. 51 mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素. 52 */ 53 if (event.relatedTarget) { return event.relatedTarget; } 54 else if (event.toElement) { return event.toElement; } 55 else if (event.fromElement) { return event.fromElement; } 56 else { return null; } 57 }, 58 getButton: function (event) {//获取鼠标按钮的点击方式 59 if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; } 60 else { 61 switch (event.button) { 62 case 0: 63 case 1: 64 case 3: 65 case 5: 66 case 7: 67 return 0; //左击 68 case 2: 69 case 6: 70 return 2; //中间键 71 case 4: 72 return 1; //右击 73 } 74 } 75 } 76 }; 77 78 79 //是否在线的判断: 80 window.onload = function () { 81 function addMessage(str) { 82 var oDiv = document.getElementById("line"); 83 var oP = document.createElement("p"); 84 oP.innerHTML = str; 85 oDiv.appendChild(oP); 86 } 87 EventUtil.addHandler(window, "online", function () { 88 addMessage("在线"); 89 }); 90 EventUtil.addHandler(window, "offline", function () { 91 addMessage("不在线"); 92 }); 93 }
1 <body> 2 在线检测; 3 <div id="line"></div> 4 </body>
测试环境:
结果:
