web-dev-qa-db-fra.com

addEventListener dans Internet Explorer

Quel est l'équivalent de l'objet Element dans Internet Explorer 9?

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

Comment ça marche dans Internet Explorer?

S'il existe une fonction égale à addEventListener et que je ne sache pas, expliquez s'il vous plaît. 

Toute aide serait appréciée. N'hésitez pas à suggérer une façon complètement différente de résoudre le problème.

javascriptinternet-explorerinternet-explorer-9addeventlistener
61
The Mask

addEventListener est la méthode DOM appropriée à utiliser pour attacher des gestionnaires d'événements.

Internet Explorer (jusqu'à la version 8) utilisait une autre méthode attachEvent.

Internet Explorer 9 prend en charge la méthode addEventListener appropriée.

Voici une tentative d’écriture d’une fonction addEvent sur plusieurs navigateurs.

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, auteur de jQuery, a soumis sa version de l'implémentation multi-navigateur de addEvent et removeEvent pour contourner les problèmes de compatibilité avec la variable addEventListener inexacte ou inexistante d'IE.

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

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

16
jchook

J'utilise cette solution et fonctionne dans IE8 ou supérieur.

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

Et alors:

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

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

Cela fonctionnera à la fois sur IE8 et Chrome, Firefox, etc.

13
Teobaldo

Comme Delan l'a dit, vous souhaitez combiner addEventListener pour les versions plus récentes et attachEvent pour les versions plus anciennes. 

Vous trouverez plus d'informations sur les écouteurs d'événements sur MDN . (Notez qu'il y a quelques réserves avec la valeur de 'this' dans votre auditeur). 

Vous pouvez également utiliser un cadre tel que jQuery pour résumer complètement la gestion des événements. 

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

Voici quelque chose pour ceux qui aiment le beau 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);
    }
}

Volé sans vergogne sur Iframe-Resizer .

2
Eddie

addEventListener est pris en charge à partir de la version 9; pour les versions plus anciennes, utilisez la fonction attachEvent quelque peu similaire.

1
Delan Azabani

MODIFIER

J'ai écrit un fragment qui émule l'interface EventListener et celle ie8, est appelable même sur des objets simples: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

ANCIENNE REPONSE

c'est un moyen d'émuler addEventListener ou attachEvent sur des navigateurs qui ne prennent pas en charge l'un de ceux-ci.
espoir aidera

(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

Je voudrais utiliser ces polyfill https://github.com/WebReflection/ie8

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