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);
