Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
addEventListener polyfill for IE6+
//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);
@wiredearp

This comment has been minimized.

Show comment
Hide comment
@wiredearp

wiredearp Jun 4, 2012

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.

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.

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jun 4, 2012

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

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

@wiredearp

This comment has been minimized.

Show comment
Hide comment
@wiredearp

wiredearp Jun 4, 2012

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

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

@termi

This comment has been minimized.

Show comment
Hide comment
@termi

termi Sep 26, 2012

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

termi commented Sep 26, 2012

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

@termi

This comment has been minimized.

Show comment
Hide comment
@termi

termi Sep 26, 2012

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+

termi commented Sep 26, 2012

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+

@tmaslen

This comment has been minimized.

Show comment
Hide comment
@tmaslen

tmaslen Nov 1, 2012

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

tmaslen commented Nov 1, 2012

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

@enyo

This comment has been minimized.

Show comment
Hide comment
@enyo

enyo Jan 31, 2013

@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 commented Jan 31, 2013

@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; }
@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Aug 11, 2013

@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.

stucox commented Aug 11, 2013

@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.

@averyvery

This comment has been minimized.

Show comment
Hide comment
@averyvery

averyvery Feb 12, 2014

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)

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)

@Daniel-Hug

This comment has been minimized.

Show comment
Hide comment
@Daniel-Hug

Daniel-Hug Feb 26, 2014

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

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

@tjcrowder

This comment has been minimized.

Show comment
Hide comment
@tjcrowder

tjcrowder Jun 21, 2014

@Daniel-Hug: Yeah, that jumped out at me too. It's not just unnecessary, it's misleading. Fortunately, the order in which the various things are added to the environment record for the variable environment when entering function code is very clear in the spec and seems to be well-followed by implementations.

@Daniel-Hug: Yeah, that jumped out at me too. It's not just unnecessary, it's misleading. Fortunately, the order in which the various things are added to the environment record for the variable environment when entering function code is very clear in the spec and seems to be well-followed by implementations.

@irbian

This comment has been minimized.

Show comment
Hide comment
@irbian

irbian Jul 9, 2014

Can fn be empty? that make sense? While coding I found a "Object don´t accept this action" and checking the value show a fn = {}

irbian commented Jul 9, 2014

Can fn be empty? that make sense? While coding I found a "Object don´t accept this action" and checking the value show a fn = {}

@sounisi5011

This comment has been minimized.

Show comment
Hide comment
@sounisi5011

sounisi5011 Dec 25, 2014

I've updated the code.
This code supported removeEventListener.

addEventListener & removeEventListener polyfill 1.1 - Qiita

Please rate.

I've updated the code.
This code supported removeEventListener.

addEventListener & removeEventListener polyfill 1.1 - Qiita

Please rate.

@nbouvrette

This comment has been minimized.

Show comment
Hide comment
@nbouvrette

nbouvrette Oct 31, 2015

@sounisi5011 Great stuff, I took the liberty to add your work in Git to give the opportunity for anyone to contribute: https://github.com/nbouvrette/eventListenerPolyfill

I started using it in one of my projects and so far no issues.

@sounisi5011 Great stuff, I took the liberty to add your work in Git to give the opportunity for anyone to contribute: https://github.com/nbouvrette/eventListenerPolyfill

I started using it in one of my projects and so far no issues.

@oshx

This comment has been minimized.

Show comment
Hide comment
@oshx

oshx Jul 19, 2017

The original version, it occurs an error while use it with jQuery in lte IE 8 after bundled via WebPack with jQuery. It fills only addEventListener. When jQuery loaded then detect eventListener via only addEventListener then jQuery try to use removeEventListener that you can see on Ready.js in jQuery 1.12.4.

@nbouvrette Could I sure to use your version for "DOMContentLoaded" also?

oshx commented Jul 19, 2017

The original version, it occurs an error while use it with jQuery in lte IE 8 after bundled via WebPack with jQuery. It fills only addEventListener. When jQuery loaded then detect eventListener via only addEventListener then jQuery try to use removeEventListener that you can see on Ready.js in jQuery 1.12.4.

@nbouvrette Could I sure to use your version for "DOMContentLoaded" also?

@hdbywtqg

This comment has been minimized.

Show comment
Hide comment
@hdbywtqg

hdbywtqg Jul 25, 2018

The original version, it occurs an error while use it with jQuery in lte IE 8 after bundled via WebPack with jQuery. It fills only addEventListener. When jQuery loaded then detect eventListener via only addEventListener then jQuery try to use removeEventListener that you can see on

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-

-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-

hdbywtqg commented Jul 25, 2018

The original version, it occurs an error while use it with jQuery in lte IE 8 after bundled via WebPack with jQuery. It fills only addEventListener. When jQuery loaded then detect eventListener via only addEventListener then jQuery try to use removeEventListener that you can see on

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-

-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment