跨浏览器的事件对象（EventUtil） 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>test03</title>
 6 </head>
 7 <body>
 8     <a target="_blank" href="http://www.google.com/" id="myLink">google</a>
 9     <input type="button" id="myBtn" value="click me" />
10     <div id="myDiv" style="background:red;height:100px;width:100px;">Move the mouse from here to the white</div>
11     <input type="text" id="myText" />
12     <script type="text/javascript" src="eventutil.js"></script>
13     <script type="text/javascript" src="eventutil_fn.js"></script>
14 </body>
15 </html>

 

 1 var EventUtil = {
 2     addHandler: function(element, type, handler) {
 3         if (element.addEventListener) {
 4             element.addEventListener(type, handler, false);
 5         } else if (element.attachEvent) {
 6             element.attachEvent("on" + type, handler);
 7         } else {
 8             element["on" + type] = handler;
 9         }
10     },
11     getEvent: function(event) {
12         return event ? event : window.event;
13     },
14     getTarget: function(event) {
15         return event.target || event.srcElement;
16     },
17     getRelatedTarget: function(event) {
18         if (event.relatedTarget) {
19             return event.relatedTarget;
20         } else if (event.toElement) {
21             return event.toElement;
22         } else if (event.fromElement) {
23             return event.fromElement;
24         } else {
25             return null;
26         }
27     },
28     getButton: function(event) {
29         if (document.implementation.hasFeature("MouseEvents", "2.0")) {
30             return event.button;
31         } else {
32             switch (event.button) {
33             case 0:
34             case 1:
35             case 3:
36             case 5:
37             case 7:
38                 return 0;
39             case 2:
40             case 6:
41                 return 2;
42             case 4:
43                 return 1;
44             }
45         }
46     },
47     getCharCode: function(event) {
48         if (typeof event.charCode == "number") {
49             return event.charCode;
50         } else {
51             return event.keyCode;
52         }
53     },
54     getWheelDelta: function(event) {
55         if (event.wheelDelta) {
56             return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
57         } else {
58             return -event.detail * 40;
59         }
60     },
61     getClipboardText: function(event) {
62         var clipboardData = (event.clipboardData || window.clipboardData);
63         return clipboardData.getData("text");
64     },
65     setClipboardText: function(event, value) {
66         if (event.clipboardData) {
67             return event.clipboardData.setData("text/plain", value);
68         } else if (window.clipboardData) {
69             return window.clipboardData.setData("text", value);
70         }
71     },
72     preventDefault: function(event) {
73         if (event.preventDefault) {
74             event.preventDefault();
75         } else {
76             event.returnValue = false;
77         }
78     },
79     removeHandler: function(element, type, handler) {
80         if (element.removeEventListener) {
81             element.removeEventListener(type, handler, false);
82         } else if (element.detachEvent) {
83             element.detachEvent("on" + type, handler);
84         } else {
85             element["on" + type] = null;
86         }
87     },
88     stopPropagation: function(event) {
89         if (event.stopPropagation) {
90             event.stopPropagation();
91         } else {
92             event.cancelBubble = true;
93         }
94     }
95 };

 

  1 //addHandler
  2 var btn = document.getElementById("myBtn");
  3 var handler = function() {
  4         console.log("handler");
  5     };
  6 EventUtil.addHandler(btn, "click", handler);
  7 //addHandler(load)
  8 EventUtil.addHandler(window, "load", function() {
  9     console.log("Loaded!");
 10 });
 11 //addHandler(loadImage)
 12 EventUtil.addHandler(window, "load", function() {
 13     var image = document.createElement("img");
 14     EventUtil.addHandler(image, "load", function(event) {
 15         event = EventUtil.getEvent(event);
 16         console.log(EventUtil.getTarget(event).src);
 17     });
 18     document.body.appendChild(image);
 19     image.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
 20 });
 21 //addHandler(script)
 22 EventUtil.addHandler(window, "load", function() {
 23     var script = document.createElement("script");
 24     EventUtil.addHandler(script, "load", function(event) {
 25         console.log("Loaded");
 26     });
 27     script.src = "example.js";
 28     document.body.appendChild(script);
 29 });
 30 //addHandler(link)
 31 EventUtil.addHandler(window, "load", function() {
 32     var link = document.createElement("link");
 33     link.type = "text/css";
 34     link.rel = "stylesheet";
 35     EventUtil.addHandler(link, "load", function(event) {
 36         console.log("css load");
 37     });
 38     link.href = "example.css";
 39     document.getElementsByTagName("head")[0].appendChild(link);
 40 });
 41 //addHandler(unload)
 42 EventUtil.addHandler(window, "unload", function(event) {
 43     console.log("Unloaded");
 44 });
 45 //addHandler(setAttribute)
 46 EventUtil.addHandler(window, "load", function(event) {
 47     var list = document.getElementById("myList");
 48     list.setAttribute("customname", "value");
 49 });
 50 //addHandler(nodeValue)
 51 EventUtil.addHandler(window, "load", function(event) {
 52     var div = document.getElementById("myDiv");
 53     div.firstChild.nodeValue = "Some new Text";
 54 });
 55 
 56 //getEvent
 57 btn.onclick = function(event) {
 58     event = EventUtil.getEvent(event);
 59 };
 60 
 61 //getTarget
 62 btn.onclick = function(event) {
 63     event = EventUtil.getEvent(event);
 64     var target = EventUtil.getTarget(event);
 65 };
 66 
 67 //getRelatedTarget
 68 var div = document.getElementById("myDiv");
 69 EventUtil.addHandler(div, "mouseout", function(event) {
 70     event = EventUtil.getEvent(event);
 71     var target = EventUtil.getTarget(event);
 72     var relatedTarget = EventUtil.getRelatedTarget(event);
 73     console.log("moused out of " + target.tagName + " to " + relatedTarget.tagName);
 74 });
 75 
 76 //getButton
 77 var div = document.getElementById("myDiv");
 78 EventUtil.addHandler(div, "mousedown", function(event) {
 79     event = EventUtil.getEvent(event);
 80     console.log(EventUtil.getButton(event));
 81 });
 82 
 83 //getCharCode
 84 var textbox = document.getElementById("myText");
 85 EventUtil.addHandler(textbox, "keypress", function(event) {
 86     event = EventUtil.getEvent(event);
 87     var keyCode = EventUtil.getCharCode(event);
 88     console.log(keyCode);
 89     var rekeyCode = String.fromCharCode(keyCode);
 90     console.log(rekeyCode);
 91 });
 92 
 93 //getClipboardText
 94 EventUtil.addHandler(textbox, "paste", function(event) {
 95     event = EventUtil.getEvent(event);
 96     var text = EventUtil.getClipboardText(event);
 97 
 98     if (!/^\d*$/.test(text)) {
 99         EventUtil.preventDefault(event);
100     }
101 });
102 
103 //preventDefault
104 var link = document.getElementById("myLink");
105 link.onclick = function(event) {
106     event = EventUtil.getEvent(event);
107     EventUtil.preventDefault(event);
108 };
109 
110 //stopPropagation
111 btn.onclick = function(event) {
112     console.log("stopPropagation");
113     event = EventUtil.getEvent(event);
114     EventUtil.stopPropagation(event);
115 };
116 document.body.onclick = function(event) {
117     console.log("Body clicked")
118 };
119 
120 //removeHandler
121 EventUtil.removeHandler(btn, "click", handler);

 

 

posted @ 2012-05-28 17:03  小猩猩君  阅读(505)  评论(0)    收藏  举报