wake-up-neo.com

addEventListener in Internet Explorer

Was ist das Äquivalent zum Elementobjekt in Internet Explorer 9?

if (!Element.prototype.addEventListener) {
    Element.prototype.addEventListener = function() { .. } 
}

Wie funktioniert das in Internet Explorer?

Wenn es eine Funktion gibt, die addEventListener entspricht, und ich weiß es nicht, erklären Sie es bitte. 

Jede Hilfe wäre dankbar. Fühlen Sie sich frei, eine völlig andere Art der Lösung des Problems vorzuschlagen.

javascriptinternet-explorerinternet-explorer-9addeventlistener
61
The Mask

addEventListener ist die richtige DOM-Methode, die zum Anhängen von Ereignishandlern verwendet wird.

Internet Explorer (bis zu Version 8) verwendete eine alternative attachEvent-Methode.

Internet Explorer 9 unterstützt die richtige addEventListener-Methode.

Folgendes sollte ein Versuch sein, eine browserübergreifende addEvent-Funktion zu schreiben.

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["on"+evnt] = func;
   }
}
134
user278064

John Resig, Autor von jQuery, reichte seine Version der browserübergreifenden Implementierung von addEvent und removeEvent ein, um Kompatibilitätsprobleme mit dem falschen oder nicht vorhandenen addEventListener des IE zu umgehen.

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

Quelle: http://ejohn.org/projects/flexible-javascript-events/

16
jchook

Ich verwende diese Lösung und arbeite in IE8 oder höher.

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

Und dann:

<button class="click-me">Say Hello</button>

<script>
  document.querySelectorAll('.click-me')[0].addEventListener('click', function () {
    console.log('Hello');
  });
</script>

Dies funktioniert sowohl mit IE8 als auch mit Chrome, Firefox usw.

13
Teobaldo

Wie Delan sagte, möchten Sie eine Kombination aus addEventListener für neuere Versionen und attachEvent für ältere Versionen verwenden. 

Weitere Informationen zu Ereignis-Listenern finden Sie unter MDN . (Beachten Sie, dass in Ihrem Listener einige Vorbehalte mit dem Wert "this" vorhanden sind). 

Sie können auch ein Framework wie jQuery verwenden, um die Ereignisbehandlung vollständig zu abstrahieren. 

$("#someelementid").bind("click", function (event) {
   // etc... $(this) is whetver caused the event
});
2
phtrivier

Hier ist etwas für diejenigen, die schönen Code mögen.

function addEventListener(obj,evt,func){
    if ('addEventListener' in window){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in window){//IE
        obj.attachEvent('on'+evt,func);
    }
}

Schamlos aus Iframe-Resizer gestohlen.

2
Eddie

addEventListener wird ab Version 9 unterstützt; Verwenden Sie für ältere Versionen die etwas ähnliche attachEvent-Funktion.

1
Delan Azabani

BEARBEITEN

Ich habe ein Snippet geschrieben, das die EventListener-Schnittstelle emuliert und die ie8-Schnittstelle, die auch für einfache Objekte aufgerufen werden kann: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

ALTE ANTWORT

dies ist eine Möglichkeit, um addEventListener oder attachEvent auf Browsern zu emulieren, die einen dieser nicht unterstützen
hoffnung wird helfen

(function (w,d) {  // 
    var
        nc  = "", nu    = "", nr    = "", t,
        a   = "addEventListener",
        n   = a in w,
        c   = (nc = "Event")+(n?(nc+= "", "Listener") : (nc+="Listener","") ),
        u   = n?(nu = "attach", "add"):(nu = "add","attach"),
        r   = n?(nr = "detach","remove"):(nr = "remove","detach")
/*
 * the evtf function, when invoked, return "attach" or "detach" "Event" functions if we are on a new browser, otherwise add "add" or "remove" "EventListener"
 */
    function evtf(whoe){return function(evnt,func,capt){return this[whoe]((n?((t = evnt.split("on"))[1] || t[0]) : ("on"+evnt)),func, (!n && capt? (whoe.indexOf("detach") < 0 ? this.setCapture() : this.removeCapture() ) : capt  ))}}
    w[nu + nc] = Element.prototype[nu + nc] = document[nu + nc] = evtf(u+c) // (add | attach)Event[Listener]
    w[nr + nc] = Element.prototype[nr + nc] = document[nr + nc] = evtf(r+c) // (remove | detach)Event[Listener]

})(window, document)
1
asdru

Ich würde diese polyfill https://github.com/WebReflection/ie8 verwenden.

<!--[if IE 8]><script
  src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"
></script><![endif]-->
0
rofrol