Add eventListener in IE javascript

Question

This code works nicely in for example Chrome, but not in Internet Explorer 8/9.

/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){if (element.addEventListener){element.addEventListener(type, handler, false);}else{element.attachEvent("on"+type, handler);}}

window.addEventListener("load", function() {

            //do some stuff

            AttachEvent(id, "click", function_name); 

}, false);

IE already complains about the addEventListener line. I believe I need to use attachEvent instead. How do I do this? I would prefer to keep the code that is working in the other browsers and only use attachEvent in Internet Explorer. How do I get this cross-browser compatible?

This is where JS libraries such as jQuery shine.

gen_Eric
– gen_Eric

2012-03-16 19:09:43 +00:00
Commented Mar 16, 2012 at 19:09 — gen_Eric
– gen_Eric, Commented Mar 16, 2012 at 19:09

saurshaz · Accepted Answer · 2013-04-25 21:32:53Z

7

IE9 does support addEventListener().

Here is how your existing function would work with attachEvent (and the old on* property).

// logic to attach the event correctly in IE9
function AttachEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
    } else {
        element['on' + type] = handler;
    }
}

You'd then set the window load event...

AttachEvent(window, "load", function() {
    // ...
});

Don't forget that the event is global with the older IEs. You could script around that if you wanted to. You'd simply have each function call this callback() which would go on to invoke the user-supplied handler() with the correct arguments.

var callback = function(e) {
    e = e || window.event;
    handler.call(element, e);
};

You could get carried away and try and normalise properties on event, such as target/srcElement, but then you might want to consider an existing library.

edited Apr 25, 2013 at 21:32

saurshaz

5095 silver badges17 bronze badges

answered Mar 16, 2012 at 19:05

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reggie Over a year ago

Ah, okay, yes. I can just reused that function, good idea. I will try it out.

Collectives™ on Stack Overflow

Add eventListener in IE javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related