{"id":17109,"date":"2012-06-05T13:18:41","date_gmt":"2012-06-05T20:18:41","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17109"},"modified":"2014-03-18T14:29:12","modified_gmt":"2014-03-18T21:29:12","slug":"addeventlistner-polyfill","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/addeventlistner-polyfill\/","title":{"rendered":"addEventListener Polyfill"},"content":{"rendered":"<pre rel=\"JavaScript\" class=\"lang-js\"><code>\/\/ addEventListener polyfill 1.0 \/ Eirik Backer \/ MIT Licence\r\n(function(win, doc){\r\n\tif(win.addEventListener)return;\t\t\/\/No need to polyfill\r\n\r\n\tfunction docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}\r\n\tfunction addEvent(on, fn, self){\r\n\t\treturn (self = this).attachEvent('on' + on, function(e){\r\n\t\t\tvar e = e || win.event;\r\n\t\t\te.preventDefault  = e.preventDefault  || function(){e.returnValue = false}\r\n\t\t\te.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}\r\n\t\t\tfn.call(self, e);\r\n\t\t});\r\n\t}\r\n\tfunction addListen(obj, i){\r\n\t\tif(i = obj.length)while(i--)obj[i].addEventListener = addEvent;\r\n\t\telse obj.addEventListener = addEvent;\r\n\t\treturn obj;\r\n\t}\r\n\r\n\taddListen([doc, win]);\r\n\tif('Element' in win)win.Element.prototype.addEventListener = addEvent;\t\t\t\/\/IE8\r\n\telse{\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/IE &lt; 8\r\n\t\tdoc.attachEvent('onreadystatechange', function(){addListen(doc.all)});\t\t\/\/Make sure we also init at domReady\r\n\t\tdocHijack('getElementsByTagName');\r\n\t\tdocHijack('getElementById');\r\n\t\tdocHijack('createElement');\r\n\t\taddListen(doc.all);\t\r\n\t}\r\n})(window, document);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\/\/ addEventListener polyfill 1.0 \/ Eirik Backer \/ MIT Licence (function(win, doc){ if(win.addEventListener)return; \/\/No need to polyfill function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}} function addEvent(on, fn, self){ return (self = this).attachEvent(&#8216;on&#8217; + on, function(e){ var e = e || win.event; e.preventDefault = e.preventDefault || function(){e.returnValue = false} e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":196692,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/cross-browser-dependency-free-dom-ready\/","url_meta":{"origin":17109,"position":0},"title":"Cross-Browser Dependency-Free DOM Ready","date":"February 24, 2015","format":false,"excerpt":"Denis Ciccale's version: var DOMReady = function(a, b, c) { b = document c = 'addEventListener' b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a) } DOMReady(function () { alert('The DOM is Ready!'); }); Minimized: var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)} Dustin Diaz's version: function r(f){\/in\/.test(document.readyState)?setTimeout('r('+f+')',9):f()} He also had a repo for it where\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5465,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/error-free-firebug-logging\/","url_meta":{"origin":17109,"position":1},"title":"Error-Free Console Logging","date":"February 2, 2010","format":false,"excerpt":"var Fb = {}; \/\/An empty object literal for holding the function Fb.log = function(obj, consoleMethod) { if (window.console && window.console.firebug && window.console.firebug.replace(\/^\\s\\s*\/, '').replace(\/\\s\\s*$\/, '') !== '') { if (typeof consoleMethod === \"string\" && typeof console[consoleMethod] === \"function\") { console[consoleMethod](obj); } else { console.log(obj); } } } If you leave\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3839,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/target-only-external-links\/","url_meta":{"origin":17109,"position":2},"title":"Target Only External Links","date":"September 4, 2009","format":false,"excerpt":"Technique #1 $('a').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass(\"external\"); Technique #2 $.expr[':'].external = function(obj) { return !obj.href.match(\/^mailto\\:\/) && (obj.hostname != location.hostname); }; $('a:external').addClass('external'); Technique #3 $('a:not([href^=\"http:\/\/your-website.com\"]):not([href^=\"#\"]):not([href^=\"\/\"])').addClass('external'); Technique #4 $('a').each(function() { var a = new RegExp('\/' + window.location.host + '\/'); if (!a.test(this.href)) { \/\/ This is an external link\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17603,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/draggable-without-jquery-ui\/","url_meta":{"origin":17109,"position":3},"title":"Draggable without jQuery UI","date":"July 27, 2012","format":false,"excerpt":"It doesn't have all the fancy callbacks and options, but hey, it makes things draggable (and with a specified handle optionally). (function($) { $.fn.drags = function(opt) { opt = $.extend({handle:\"\",cursor:\"move\"}, opt); if(opt.handle === \"\") { var $el = this; } else { var $el = this.find(opt.handle); } return $el.css('cursor', opt.cursor).on(\"mousedown\",\u2026","rel":"","context":"With 88 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7275,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/styled-popup-menu\/","url_meta":{"origin":17109,"position":4},"title":"Styled Popup Menu","date":"August 25, 2010","format":false,"excerpt":"This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa. View Demo HTML We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu. Male -\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19750,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/strip-whitespace-from-string\/","url_meta":{"origin":17109,"position":5},"title":"Strip Whitespace From String","date":"January 5, 2013","format":false,"excerpt":"Whitespace, meaning tabs and spaces. Vanilla JavaScript (Trim Leading and Trailing) var str = \" a b c d e f g \"; var newStr = str.trim(); \/\/ \"a b c d e f g\" That method is ES 5, so just in case you could polyfill it (IE 8\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17109"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17109"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17109\/revisions"}],"predecessor-version":[{"id":166170,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17109\/revisions\/166170"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17109"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}