Normalizing addEventListener and event Between Modern Browsers and IE9
Modern browsers make using event listeners very easy. The API is normalized across all modern browsers (Chrome, Firefox, Safari, IE10+, iOS, Android), but if you’re stuck supporting IE9 on a project like I am right now, some elbow grease is needed to make your event listeners work the same across browsers.
Functions/Snippets For IE9
//Add an event listener to an element function listen(element, event, callback) { if(element.attachEvent) { element.attachEvent("on" + event, function() {callback.call(element);}); } else if(this.addEventListener) { element.addEventListener(event, callback, false); } } //If you prefer adding this function to the element prototype, use this syntax Element.prototype.listen = function(event, callback) { if(this.attachEvent) { this.attachEvent("on" + event, function() {callback.call(this);}); } else if(this.addEventListener) { this.addEventListener(event, callback, false); } }; //Doing this allows you to add it to the NodeList prototype too NodeList.prototype.listen = function(event, callback) { for(var i = 0, l = this.length; i < l; i++) { this[i].listen(event, callback); } };
Inside the callback function, some more work needs to be done:
function callback(event) { //Get the event in both IE9 and modern browsers var event = event ? event : window.event; //Get the target of the event (in listeners like click) var target = event ? event.target : window.event.srcElement; }
Finally, you can use the event to stop propagation using this function:
function stopPropagation(event) { if(event.stopPropagation) { event.stopPropagation(); } else { event.returnValue = false; } }