对象不支持IE 8中的属性或方法“ addEventListner”

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

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 2

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

Answer 3

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