addEventListener in Internet Explorer

javascript internet-explorer internet-explorer-9 addeventlistener

114,961

Solution 1

addEventListener is the proper DOM method to use for attaching event handlers.

Internet Explorer (up to version 8) used an alternate attachEvent method.

Internet Explorer 9 supports the proper addEventListener method.

The following should be an attempt to write a cross-browser addEvent function.

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

Solution 2

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/

Solution 3

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.

Solution 4

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

Solution 5

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.

View more solutions

114,961

Author by

The Mask

Updated on July 05, 2022

Comments

The Mask almost 2 years
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.
Marcel Korpel over 11 years

The last condition should also include "on"+.
pcunite almost 11 years

For IE9 and addEventListener you need an HTML5 <!DOCTYPE html>
Okeydoke over 10 years

@pcunite wish I could up vote that comment more. Very important point
g13n over 10 years

Also since IE9 uses IE7 rendering mode in Compatibility view, only the attachEvent works. So it is important to have this check instead of relying on addEventListener.
Ali Shakiba over 9 years

This code tries to bind callback fn to obj in addition to adding an event listener, but this is redundant because everyone using JS should already know about this.
Sanghyun Lee about 9 years

You would've gotten more votes if you had introduced John Resig as the author of jQuery.
zchpit about 7 years

I have problem with Element (type is undefined)
RTeobaldo about 7 years

check your document type version, this should be html5 doctype
magritte about 7 years

This implementation isn't complete. It's missing the useCapture parameter.