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

Answer 1

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

Answer 2

You can use attachEvent instead.

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

This is also a good answer, link here.