addEventListener not supporting in IE 8

Question

I have tried the below code for one of my project. This function performs unchecking the radio buttons on clicking another one. This code works in FF and chrome but not in iE. Please advice.

JS:

document.getElementById("main2").addEventListener("change", function(){
    if (this.checked) {
        var subs_list = document.getElementsByName("main_sub");
        var subs = Array.prototype.slice.call(subs_list);
        subs.forEach(function(sub){
            sub.checked = false;
        });
    }
});

var subs_list_2 = document.getElementsByName("main_sub");
var subs_2 = Array.prototype.slice.call(subs_list_2);
subs_2.forEach(function(sub){
    sub.addEventListener("change", function(){
        if (this.checked) {
            document.getElementById("main2").checked = false;
            document.getElementById("main").checked = true;
        }
    });
});

Yes, `addEventListener` doesn't work in IE8. I'd just use jQuery, keep it simple. `forEach` doesn't work either FYI. — elclanrs, May 02 '14 at 05:10
Load a project using conditional comments that patches IE8, and you're set. Like this: [ES5-DOM-SHIM](https://github.com/termi/ES5-DOM-SHIM). That way you're not boxed into jQuery's API. — cookie monster, May 02 '14 at 05:45

jfriend00 · Accepted Answer · 2014-05-02T06:49:14.650

IE8 does not support addEventListener(). It has it's own attachEvent() which is similar so you have to check if addEventListener is there and if not, use attachEvent().

IE8 also does not support .forEach() on arrays. You can either install a shim (shown here) for it or use a regular for loop to iterate through arrays (the old fashioned way).

This is a simple cross browser event function:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

So, instead of:

sub.addEventListener("change", fn);

You would use this:

addEvent(sub, "change", fn);

and it would work in both modern browsers and older versions of IE>

Here's a little more advanced version with more features:

// refined add event cross browser
function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);   
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

You want me to just add the above code.? Or i have to rewrite the code? — user3589255, May 02 '14 at 05:18
You have to use the `addEvent()` function for adding event handlers instead of `obj.addEventListener()`. I added an example of usage to my answer. — jfriend00, May 02 '14 at 05:20
Can you please help to rewrite my code by using attach event? — user3589255, May 02 '14 at 05:27
@user3589255 - I added an example of one of your event handlers to my answer. Please look at that, look at what the `addEvent()` function does and then ask any more specific questions. — jfriend00, May 02 '14 at 05:29
I did. How do i replace the below line? document.getElementById("main2").addEventListener("change", function(){ — user3589255, May 02 '14 at 05:34
@user3589255 - You would do it like this: `addEvent(document.getElementById("main2"), "change", function() {});` — jfriend00, May 02 '14 at 06:46
@user3589255 - note that you will also have to fix the usage of `.forEach()` which is also not supported in IE8. I added to my answer with a couple options for that. — jfriend00, May 02 '14 at 06:49

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

You can use attachEvent instead.

Also, refer here for an answer, which is posted above.

This is also a good answer, link here.

edited May 23 '17 at 10:32

Community

1
1

answered May 02 '14 at 05:19

Jahm

658
1
12
27

addEventListener not supporting in IE 8

2 Answers2