Sie addEventListener () im Internet Explorer

Was ist das äquivalent zu den Element-Objekt in Internet Explorer 9?

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

Wie funktioniert es im Internet Explorer?

Wenn es eine Funktion gleich addEventListener und ich weiß nicht, bitte erklären.

Jede Hilfe würde geschätzt werden. Fühlen Sie sich frei, deuten auf eine völlig andere Art, das problem zu lösen.

InformationsquelleAutor der Frage The Mask | 2011-08-03

  1. 132

    addEventListener ist der richtige DOM-Methode zum anfügen von Ereignishandlern.

    Internet Explorer (bis version 8) verwendet, eine Alternative attachEvent Methode.

    Internet Explorer 9 unterstützt die ordnungsgemäße addEventListener Methode.

    Folgenden soll ein Versuch sein, schreiben einen cross-browser - addEvent Funktion.

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

    InformationsquelleAutor der Antwort user278064

  2. 16

    John Resig, Urheber der jQuery, reichte seine version der cross-browser-Implementierung von addEvent und removeEvent zu umgehen Kompatibilitätsprobleme mit dem IE ist die falsche oder nicht vorhandene addEventListener.

    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/

    InformationsquelleAutor der Antwort jchook

  3. 13

    Ich bin mit dieser Lösung und funktioniert 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);
    };
  }

    Dann:

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

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

    Dies funktioniert sowohl IE8 und Chrome, Firefox, etc.

    InformationsquelleAutor der Antwort Teobaldo

  4. 2

    Als Delan gesagt, Sie wollen verwenden Sie eine Kombination von addEventListener () für die neueren Versionen, und attachEvent für ältere.

    Finden Sie weitere Informationen zu Ereignis-Listenern auf MDN. (Hinweis: es gibt einige Vorsichtsmaßnahmen mit dem Wert von "this" in deiner Zuhörer).

    Können Sie auch mit einem framework wie jQuery zu abstrahieren, das event-handling insgesamt. 

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

    InformationsquelleAutor der Antwort phtrivier

  5. 2

    Hier ist etwas für diejenigen, die gerne schönen code.

    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 gestohlen von Iframe-Resizer.

    InformationsquelleAutor der Antwort Eddie

  6. 1

    addEventListener wird unterstützt von version 9 ab; für ältere Versionen verwenden, das etwas ähnliches attachEvent Funktion.

    InformationsquelleAutor der Antwort Delan Azabani

  7. 1

    BEARBEITEN

    Schrieb ich ein snippet, dass emulieren die EventListener-Schnittstelle und den ie8, ist abrufbar auch auf der Ebene von Objekten:
    https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

    ALTE ANTWORT

    dies ist ein Weg für emulieren addEventListener oder attachEvent auf Browsern, die keine Unterstützung einer jener

    hoffe, dass hilft

    (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)

    InformationsquelleAutor der Antwort asdru

  8. 0

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

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

    InformationsquelleAutor der Antwort rofrol

Schreibe einen Kommentar