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}
			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);

Reference URL

Comments

  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:

    https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener$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) {  // 
                    var
                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)
            }
        })(window,document)
    

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