HTML5中对于网络是否断开的检测.很有意思哦

 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>

测试环境:

结果:

更多相关文章

随机推荐