Grow your CSS skills. Land your dream job.

Last updated on:

addEventListener Polyfill

// 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}, 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
})(window, document);

Reference URL


  1. Alez

    It doesn’t work – “unsupported removeEventListener”.

  2. I guess it is only a polyfill for addEventListener, not for removeEventListener ;

    But you should be able to add this feature in this example pretty easily I guess !

  3. Lski (Lee)
    Permalink to comment#

    I thought I would give my to pennies, for those looking for a polyfill for both add and remove EventListener, try the MDN website:$revision/650019#Compatibility

  4. asdru
    Permalink to comment#

    what about this?
    is more simple but i think it will work on ie8+

    (function on(w,d) {  // 
                a   = "addEventListener"
                n   = a in w,
                c   = "Event"+(n?"Listener":""),
                nc  = "Event"+(!n?"Listener":""),
                u   = n?"add":"attach",
                nu  = !n?"add":"attach",
                r   = n?"remove":"detach",
                nr  = !n?"remove":"detach"
            w[nu + nc] = Element.prototype[nu + nc] = function(evnt,func,c){
                return this[u+c]((n?evnt.split("on")[1]:"on"+evnt),function(e){if(!e)e = event;else event = e;func(e)},c)
            w[nr + nc] = Element.prototype[nr + nc] = function(evnt,func,c){
                return this[r+c]((n?evnt.split("on")[1]:"on"+evnt),function(e){if(!e)e = event;else event = e;func(e)},c)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

It's broken though, and the Jetpack team is aware of it. Your best bet right now is to escape the code yourself and post in <pre><code> tags.

If formatting screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".