What is the equivalent to the Element Object in Internet Explorer 9?
if (!Element.prototype.addEventListener) {
Element.prototype.addEventListener = function() { .. }
}
How does it works in Internet Explorer?
If there's a function equal to addEventListener
and I don't know, explain please.
Any help would be appreciated. Feel free to suggest a completely different way of solving the problem.
This question is related to
javascript
internet-explorer
internet-explorer-9
addeventlistener
As Delan said, you want to use a combination of addEventListener for newer versions, and attachEvent for older ones.
You'll find more information about event listeners on MDN. (Note there are some caveats with the value of 'this' in your listener).
You can also use a framework like jQuery to abstract the event handling altogether.
$("#someelementid").bind("click", function (event) {
// etc... $(this) is whetver caused the event
});
addEventListener
is supported from version 9 onwards; for older versions use the somewhat similar attachEvent
function.
I'm using this solution and works in IE8 or greater.
if (typeof Element.prototype.addEventListener === 'undefined') {
Element.prototype.addEventListener = function (e, callback) {
e = 'on' + e;
return this.attachEvent(e, callback);
};
}
And then:
<button class="click-me">Say Hello</button>
<script>
document.querySelectorAll('.click-me')[0].addEventListener('click', function () {
console.log('Hello');
});
</script>
This will work both IE8 and Chrome, Firefox, etc.
John Resig, author of jQuery, submitted his version of cross-browser implementation of addEvent
and removeEvent
to circumvent compatibility issues with IE's improper or non-existent addEventListener
.
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
Source: http://ejohn.org/projects/flexible-javascript-events/
Here's something for those who like beautiful code.
function addEventListener(obj,evt,func){
if ('addEventListener' in window){
obj.addEventListener(evt,func, false);
} else if ('attachEvent' in window){//IE
obj.attachEvent('on'+evt,func);
}
}
Shamelessly stolen from Iframe-Resizer.
EDIT
I wrote a snippet that emulate the EventListener interface and the ie8 one, is callable even on plain objects: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js
OLD ANSWER
this is a way for emulate addEventListener or attachEvent on browsers that don't support one of those
hope will help
(function (w,d) { //
var
nc = "", nu = "", nr = "", t,
a = "addEventListener",
n = a in w,
c = (nc = "Event")+(n?(nc+= "", "Listener") : (nc+="Listener","") ),
u = n?(nu = "attach", "add"):(nu = "add","attach"),
r = n?(nr = "detach","remove"):(nr = "remove","detach")
/*
* the evtf function, when invoked, return "attach" or "detach" "Event" functions if we are on a new browser, otherwise add "add" or "remove" "EventListener"
*/
function evtf(whoe){return function(evnt,func,capt){return this[whoe]((n?((t = evnt.split("on"))[1] || t[0]) : ("on"+evnt)),func, (!n && capt? (whoe.indexOf("detach") < 0 ? this.setCapture() : this.removeCapture() ) : capt ))}}
w[nu + nc] = Element.prototype[nu + nc] = document[nu + nc] = evtf(u+c) // (add | attach)Event[Listener]
w[nr + nc] = Element.prototype[nr + nc] = document[nr + nc] = evtf(r+c) // (remove | detach)Event[Listener]
})(window, document)
I would use these polyfill https://github.com/WebReflection/ie8
<!--[if IE 8]><script
src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"
></script><![endif]-->
Source: Stackoverflow.com