addEventListener error in IE8

Question

I'm getting an error message in ie8: Object doesn't support property or method 'addEventListener'. How can I fix this? I've seen adding an else statementand changing addEventListener to attachEvent. However, I am a bit green in the land of js and not sure where that should go, I did try a few ways.

$(document).ready(function() {

// Off canvas menu
var $slider = document.querySelector('#slider');
var $toggle = document.querySelector('.toggle-nav');
var $toggle2 = document.querySelector('nav .toggle-nav');
// var $link = document.querySelector('.link > a');

$toggle.addEventListener('click', function() {
    var isOpen = $slider.classList.contains('slide-in');

    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
    $('#slider').animate({'right': '100%'}, 400);
});

$toggle2.addEventListener('click', function() {
    var isOpen = $slider.classList.contains('slide-in');

    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
    $('#slider').animate({'right': '0'}, 300);
});

var toggleDataAttr = function(parentElem, toggleElem, opt1, opt2, dataAttr) {
    var toggleElem = parentElem.querySelector(toggleElem);
    toggleElem.setAttribute(dataAttr, toggleElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
};

var toggle_li = document.querySelectorAll('li');

for (var i = 0; i < toggle_li.length; i++) {
    toggle_li[i].onclick = function() {
        toggleDataAttr(this, '.toggleContent', 'closed', 'open', 'data-state');
        toggleDataAttr(this, '.toggleIcon', 'down', 'up', 'data-icon');
    };
}

});

http://stackoverflow.com/questions/9769868/addeventlistener-not-working-in-ie8 — Brent Barbata, Nov 12 '15 at 09:33

score 0 · Answer 1 · answered Nov 12 '15 at 09:27

0

addEventListener() is not supported in IE8 and lower (more info here: http://www.w3schools.com/jsref/met_document_addeventlistener.asp), instead you need to use attachEvent() in these browsers.

You can use it like this:

if(element.addEventListener()) {
  element.addEventListener('click', myFunction(), true);
} else if(element.attachEvent()) {
  element.attachEvent('click', myFunction());
}

This way to do it makes it multi-browser compatible.

answered Nov 12 '15 at 09:27

eLGi

80
2
10

Thanks, I've tried this a few ways in my own code and must be putting it in all the wrong places. Still struggling to get this to work! – lettucebe Nov 12 '15 at 15:59

addEventListener error in IE8

1 Answers1