public
Last active

addEventListener polyfill for IE6+

  • Download Gist
addEventListener-polyfill.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
//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('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
fn.call(self, e);
});
}
function addListen(obj, i){
if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
else obj.addEventListener = addEvent;
return obj;
}
 
addListen([doc, win]);
if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
else{ //IE < 8
doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
docHijack('getElementsByTagName');
docHijack('getElementById');
docHijack('createElement');
addListen(doc.all);
}
})(window, document);

Awesome! If you are eager to add an overhead, you might be persuaded to look into http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener which allows an object instead of a function to pass as event handler. I find this a lot more maintainable, though not easily emulated in IE.

It wouldn't take much to add removeEventListener and polyfill target / currentTarget. Also, for IE<8 what if we used css expressions to do one-time check for addEventListener on an element?

Anyway, here's the concept: https://gist.github.com/2869388

That is highly original, to say the least. I can suggest mouseenter and mouseleave emulation for non-IE browsers to make this an all time favorite Gist :)

Hi! Check out my full DOM API implementation for IE < 8. It add support of [add/remove]EventListener, dispatchEvent and many other things to IE6,7,8 and w3c browsers. Short brief how it work in IE < 8 in wiki

I forgot giving a demo: this simple demo works in IE6+ as it work in w3c browser, and this more complex demo not working in IE6 due lack of CSS, but work well in IE7+

Wouldn't if(i = obj.length) (line 15) always assert true?

@masien In JS an assignment is an expression that returns the assigned value. So:
(x = 1) === 1 and (x = 0) === 0
So writing

if (i = obj.length) { }

is just a shortcut for:

if (obj.length) { i = obj.length; }

@enyo – isn't it more like this?

i = obj.length;
if (i) { }

i.e. i will always be set, regardless of the value of obj.length.

Ran into an issue with this and the current version of jQuery — since jQuery checks for "window.addEventListener" to determine the type of event system, this code seems to break it in IE8 (jQuery then assumes that removeEventListener is also present). The code in question that blew up:

function detach() {
    if ( document.addEventListener ) {
        document.removeEventListener( "DOMContentLoaded", completed, false );
        window.removeEventListener( "load", completed, false );

    } else {
        document.detachEvent( "onreadystatechange", completed );
        window.detachEvent( "onload", completed );
    }
}

(To be clear, I'm not pointing out an issue with this code, just trying to save some future Googler the headache I just had! It's rare that you'd use both an addEventListener polyfill AND jQuery)

If you care about byte saving, there's an unnecessary var keyword on line 8. Here it is updated: https://gist.github.com/Daniel-Hug/9221945

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.