object doesn't support property or method 'addEventListner' in ie 8

Question

This is my code

    document.addEventListener('scroll', function (e) {

     var outer1 = document.getElementById('outer1');
     var outer2 = document.getElementById('outer2');
      -------
      --------
    }

I am using jQuery version jQuery v1.11.0 . But I got this error. Currently there are many similar usages and this issue is only visible on IE8

Answer 1

In-case anyone needs IE7 support, try the below, it worked for me, thanks all for the scripts above.

function preloadImages(array, waitForOtherResources, timeout) {
            var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15 * 1000, timer;
            if (!preloadImages.list) {
                preloadImages.list = [];
            }
            if (!waitForOtherResources || document.readyState === 'complete') {
                loadNow();
            } else {

                addEvent('load', window, function () {
                    clearTimeout(timer);
                    loadNow();
                });

                // in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
                // then preload the images anyway after some timeout time
                timer = setTimeout(loadNow, t);
            }
            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[evnt] = func;
                }
            }
            function loadNow() {
                if (!loaded) {
                    loaded = true;
                    for (var i = 0; i < imgs.length; i++) {
                        var img = new Image();
                        img.onload = img.onerror = img.onabort = function () {
                            var index = preloadImages.list.indexOf(this);
                            if (index !== -1) {
                                // remove image from the array once it's loaded
                                // for memory consumption reasons
                                preloadImages.list.splice(index, 1);
                            }
                        }
                        preloadImages.list.push(img);
                        img.src = imgs[i];
                    }
                }
            }
        }

if (!Array.prototype.indexOf) {
            Array.prototype.indexOf = function (searchElement, fromIndex) {

                var k;
                if (this == null) {
                    throw new TypeError('"this" is null or not defined');
                }

                var O = Object(this);
                var len = O.length >>> 0;

                if (len === 0) {
                    return -1;
                }
                var n = +fromIndex || 0;

                if (Math.abs(n) === Infinity) {
                    n = 0;
                }
                if (n >= len) {
                    return -1;
                }
                k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

                while (k < len) {
                    if (k in O && O[k] === searchElement) {
                        return k;
                    }
                    k++;
                }
                return -1;
            };
        }

Answer 2

Compatibility

You can work around the addEventListener, removeEventListener, Event.preventDefault and Event.stopPropagation not being supported by IE 8 using the following code at the beginning of your script. The code supports the use of handleEvent and also the DOMContentLoaded event.

Note: useCapture is not supported, as IE 8 does not have any alternative method of it. Please also note that the following code only adds support to IE 8.

(function() {
  if (!Event.prototype.preventDefault) {
    Event.prototype.preventDefault=function() {
      this.returnValue=false;
    };
  }
  if (!Event.prototype.stopPropagation) {
    Event.prototype.stopPropagation=function() {
      this.cancelBubble=true;
    };
  }
  if (!Element.prototype.addEventListener) {
    var eventListeners=[];

    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var self=this;
      var wrapper=function(e) {
        e.target=e.srcElement;
        e.currentTarget=self;
        if (listener.handleEvent) {
          listener.handleEvent(e);
        } else {
          listener.call(self,e);
        }
      };
      if (type=="DOMContentLoaded") {
        var wrapper2=function(e) {
          if (document.readyState=="complete") {
            wrapper(e);
          }
        };
        document.attachEvent("onreadystatechange",wrapper2);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});

        if (document.readyState=="complete") {
          var e=new Event();
          e.srcElement=window;
          wrapper2(e);
        }
      } else {
        this.attachEvent("on"+type,wrapper);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
      }
    };
    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var counter=0;
      while (counter<eventListeners.length) {
        var eventListener=eventListeners[counter];
        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
          if (type=="DOMContentLoaded") {
            this.detachEvent("onreadystatechange",eventListener.wrapper);
          } else {
            this.detachEvent("on"+type,eventListener.wrapper);
          }
          break;
        }
        ++counter;
      }
    };
    Element.prototype.addEventListener=addEventListener;
    Element.prototype.removeEventListener=removeEventListener;
    if (HTMLDocument) {
      HTMLDocument.prototype.addEventListener=addEventListener;
      HTMLDocument.prototype.removeEventListener=removeEventListener;
    }
    if (Window) {
      Window.prototype.addEventListener=addEventListener;
      Window.prototype.removeEventListener=removeEventListener;
    }
  }
})();

Answer 3

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

you can try this for 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[evnt] = func;
   }
}