-
-
Save eirikbacker/2864711 to your computer and use it in GitHub Desktop.
//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); |
@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
@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.
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 = {}
I've updated the code.
This code supported removeEventListener
.
addEventListener & removeEventListener polyfill 1.1 - Qiita
Please rate.
@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.
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?
Fine work, thank you. There may be an issue with line 11:
fn.call(self, e);
In case that fn
is an empty object. When running IE11 in emulation mode for IE8, then it reports that this method is unavailable:
Das Objekt unterstützt diese Aktion nicht.
Adding a condition helps:
if ("call" in fn) fn.call(self, e);
Wouldn't if(i = obj.length) (line 15) always assert true?