关于跨浏览器的部分代码的封装

这段代码是从javascript高级程序设计(第三版)上面事件部分抽取出来的,共享一下,级当时自己做个笔记.以后应该能够用得找.

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

 

posted @ 2014-03-03 17:49  思思博士  阅读(685)  评论(0编辑  收藏  举报