├── index.html ├── README.md └── eventShim.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Google 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EventShim 2 | 3 | ## A Basic Standards DOM Event API for IE8 4 | EventShim adds support for addEventListener(), removeEventListener(), and standard Event object properties to IE8's event model. 5 | 6 | ### Why 7 | To write standards-based event code now in IE8 without using a library such as jQuery, MooTools, etc. 8 | 9 | ### How 10 | The right way: by modifying the DispEventObj's prototype, as well as the HTMLDocument and Element DOM interface prototypes. This approach allows you to "write once." 11 | 12 | ### Quick Start 13 | EventShim is easy to implement. 14 | 15 | #### Step 1: Clone the repo 16 | $ git clone git@github.com:jwmcpeak/EventShim 17 | 18 | #### Step 2: Load the Script 19 | 20 | 21 | ### Notable API 22 | The goal of EventShim is to make writing cross-browser event code painless and transparent. Naturally, it is impossible to replicate 100% of the DOM3 Event API in IE8, but the following lists the properties and methods added to the DispEventObj interface. 23 | 24 | #### Properties 25 | 26 | - bubbles 27 | - defaultPrevented 28 | - relatedTarget 29 | - target 30 | 31 | #### Methods 32 | 33 | - preventDefault() 34 | - stopPropagation() 35 | 36 | EventShim also adds addEventListener() and removeEventListener() to the following objects and/or interfaces: 37 | 38 | - window 39 | - HTMLDocument 40 | - Element 41 | 42 | This covers all use-cases. 43 | 44 | 45 | ### Notes 46 | - There is no capture. It's IE, remember? -------------------------------------------------------------------------------- /eventShim.js: -------------------------------------------------------------------------------- 1 | /* Copyright (c) 2012 Jeremy McPeak http://www.wdonline.com 2 | * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 3 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 4 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 5 | */ 6 | 7 | (function() { 8 | 9 | function init() { 10 | 11 | var loadedForBrowser = false; 12 | 13 | if (Object.defineProperty) { 14 | // create an MS event object and get prototype 15 | var proto = document.createEventObject().constructor.prototype; 16 | 17 | /** 18 | * Indicates whether an event propagates up from the target. 19 | * @returns Boolean 20 | */ 21 | Object.defineProperty(proto, "bubbles", { 22 | get: function() { 23 | // not a complete list of DOM3 events; some of these IE8 doesn't support 24 | var bubbleEvents = ["select", "scroll", "click", "dblclick", 25 | "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "wheel", "textinput", 26 | "keydown", "keypress", "keyup"], 27 | type = this.type; 28 | 29 | for (var i = 0, l = bubbleEvents.length; i < l; i++) { 30 | if (type === bubbleEvents[i]) { 31 | return true; 32 | } 33 | } 34 | 35 | return false; 36 | } 37 | }); 38 | 39 | 40 | /** 41 | * Indicates whether or not preventDefault() was called on the event. 42 | * @returns Boolean 43 | */ 44 | Object.defineProperty(proto, "defaultPrevented", { 45 | get: function() { 46 | // if preventDefault() was never called, or returnValue not given a value 47 | // then returnValue is undefined 48 | var returnValue = this.returnValue, 49 | undef; 50 | 51 | return !(returnValue === undef || returnValue); 52 | } 53 | }); 54 | 55 | 56 | /** 57 | * Gets the secondary targets of mouseover and mouseout events (toElement and fromElement) 58 | * @returns EventTarget or {null} 59 | */ 60 | Object.defineProperty(proto, "relatedTarget", { 61 | get: function() { 62 | var type = this.type; 63 | 64 | if (type === "mouseover" || type === "mouseout") { 65 | return (type === "mouseover") ? this.fromElement : this.toElement; 66 | } 67 | 68 | return null; 69 | } 70 | }); 71 | 72 | 73 | /** 74 | * Gets the target of the event (srcElement) 75 | * @returns EventTarget 76 | */ 77 | Object.defineProperty(proto, "target", { 78 | get: function() { return this.srcElement; } 79 | }); 80 | 81 | loadedForBrowser = true; 82 | } 83 | 84 | 85 | if (!proto.preventDefault) { 86 | /** 87 | * Cancels the event if it is cancelable. (returnValue) 88 | * @returns {undefined} 89 | */ 90 | proto.preventDefault = function() { 91 | this.returnValue = false; 92 | }; 93 | 94 | loadedForBrowser = true; 95 | } 96 | 97 | if (!proto.stopPropagation) { 98 | /** 99 | * Prevents further propagation of the current event. (cancelBubble()) 100 | * @returns {undefined} 101 | */ 102 | proto.stopPropagation = function() { 103 | this.cancelBubble = true; 104 | }; 105 | 106 | loadedForBrowser = true; 107 | } 108 | 109 | /*************************************** 110 | * 111 | * Event Listener Setup 112 | * Nothing complex here 113 | * 114 | ***************************************/ 115 | if (!Element.prototype.addEventListener) { 116 | /** 117 | * Determines if the provided object implements EventListener 118 | * @returns boolean 119 | */ 120 | var implementsEventListener = function(obj) { 121 | return (typeof obj !== "function" && typeof obj["handleEvent"] === "function"); 122 | }; 123 | 124 | var customELKey = "__eventShim__"; 125 | 126 | /** 127 | * Adds an event listener to the DOM object 128 | * @returns {undefined} 129 | */ 130 | var addEventListenerFunc = function(type, handler, useCapture) { 131 | // useCapture isn't used; it's IE! 132 | 133 | var fn = handler; 134 | 135 | if (implementsEventListener(handler)) { 136 | 137 | if (typeof handler[customELKey] !== "function") { 138 | handler[customELKey] = function(e) { 139 | handler["handleEvent"](e); 140 | }; 141 | } 142 | 143 | fn = handler[customELKey]; 144 | } 145 | 146 | this.attachEvent("on" + type, fn.bind(this)); 147 | }; 148 | 149 | /** 150 | * Removes an event listener to the DOM object 151 | * @returns {undefined} 152 | */ 153 | var removeEventListenerFunc = function(type, handler, useCapture) { 154 | // useCapture isn't used; it's IE! 155 | 156 | var fn = handler; 157 | 158 | if (implementsEventListener(handler)) { 159 | fn = handler[customELKey]; 160 | } 161 | 162 | this.detachEvent("on" + type, fn.bind(this)); 163 | }; 164 | 165 | // setup the DOM and window objects 166 | HTMLDocument.prototype.addEventListener = addEventListenerFunc; 167 | HTMLDocument.prototype.removeEventListener = removeEventListenerFunc; 168 | 169 | Element.prototype.addEventListener = addEventListenerFunc; 170 | Element.prototype.removeEventListener = removeEventListenerFunc; 171 | 172 | window.addEventListener = addEventListenerFunc; 173 | window.removeEventListener = removeEventListenerFunc; 174 | 175 | loadedForBrowser = true; 176 | } 177 | 178 | return { 179 | loadedForBrowser : loadedForBrowser 180 | }; 181 | } 182 | 183 | // check for AMD support 184 | if (typeof define === "function" && define["amd"]) { 185 | define(init); 186 | } else { 187 | return init(); 188 | } 189 | 190 | }()); 191 | --------------------------------------------------------------------------------