//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); |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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 :) |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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+ |
This comment has been minimized.
This comment has been minimized.
Wouldn't if(i = obj.length) (line 15) always assert true? |
This comment has been minimized.
This comment has been minimized.
@masien In JS an assignment is an expression that returns the assigned value. So: if (i = obj.length) { } is just a shortcut for: if (obj.length) { i = obj.length; } |
This comment has been minimized.
This comment has been minimized.
@enyo – isn't it more like this? i = obj.length;
if (i) { } i.e. |
This comment has been minimized.
This comment has been minimized.
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:
(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) |
This comment has been minimized.
This comment has been minimized.
If you care about byte saving, there's an unnecessary |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
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 = {} |
This comment has been minimized.
This comment has been minimized.
I've updated the code. addEventListener & removeEventListener polyfill 1.1 - Qiita Please rate. |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
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 @nbouvrette Could I sure to use your version for "DOMContentLoaded" also? |
This comment has been minimized.
This comment has been minimized.
Fine work, thank you. There may be an issue with line 11:
In case that
Adding a condition helps:
|
This comment has been minimized.
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.