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