Utilisation correcte de addEventListener () / attachEvent ()?

Question

Je me demande comment utiliser addEventListener respectivement attachEvent correctement?

 window.onload = function (myFunc1) { /* do something */ }

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...
 

ou

 function myFunc1() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc1);
}

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...
 

?

Ce navigateur est-il sécurisé ou devrais-je mieux utiliser quelque chose comme ceci:

 function myFunc1(){ /* do something */ }
function myFunc2(){ /* do something */ }
// ...

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

addOnloadEvent(myFunc1);
addOnloadEvent(myFunc2);
// ...
 

AND: Dites myfunc2 concerne IE 7 uniquement. Comment modifier la méthode correcte / préférée en conséquence?

Merci beaucoup!

Answer 1

L'utilisation des deux est semblable, bien que tous les deux prennent une syntaxe légèrement différente pour le paramètre d'événement:

la méthode addEventListener (mdn de référence):

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

Liste des événements pour addEventListener.

attachEvent (référence msdn):

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

Liste des événements pour attachEvent.

Arguments

Pour les deux méthodes les arguments sont comme suit:
1. Est le type d'événement.
2. Est la fonction à appeler une fois que l'événement a été déclenché.
3. (addEventListener seulement) Si la valeur est true, indique que l'utilisateur souhaite lancer la capture.

Explication

Les deux méthodes sont utilisées pour atteindre le même objectif, à savoir la fixation d'un événement à un élément.
La différence est qu' attachEvent ne peut être utilisé sur les anciens trident moteurs de rendu ( IE5+ IE5-8*) et addEventListener est un W3 standard qui est mis en œuvre dans la plupart des autres navigateurs (FF, Webkit, Opera, IE9+).

Comme Smitty recommandé que vous devriez jeter un oeil à cette Dustin Diaz addEvent un solide point de croix-navigateur de mise en oeuvre sans l'utilisation d'un cadre.

Pour la solidité de la croix-navigateur d'événements de soutien, y compris normalisations que vous ne serez pas obtenir avec l'Diaz solution d'utiliser un framework.

*IE9-10 soutien des deux méthodes, pour assurer la compatibilité ascendante.

Merci à Luc Puplett pour préciser que attachEvent a été retiré de IE11.

Answer 2

Quiconque continue de participer à cette discussion sans trouver la réponse recherchée:
http://dustindiaz.com/rock-solid-addevent
C'est l'une des solutions les plus élégantes que j'ai trouvées pour ceux d'entre nous qui ont des restrictions sur l'utilisation des frameworks.

  function addEvent(obj, type, fn) {

   if (obj.addEventListener) {
     obj.addEventListener(type, fn, false);
     EventCache.add(obj, type, fn);
   } else 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]);
     EventCache.add(obj, type, fn);
   } else {
     obj["on" + type] = obj["e" + type + fn];
   }

 }

 var EventCache = function () {

   var listEvents = [];
   return {
     listEvents: listEvents,
     add: function (node, sEventName, fHandler) {
       listEvents.push(arguments);
     },
     flush: function () {
       var i, item;

       for (i = listEvents.length - 1; i >= 0; i = i - 1) {
         item = listEvents[i];
         if (item[0].removeEventListener) {
           item[0].removeEventListener(item[1], item[2], item[3]);
         };

         if (item[1].substring(0, 2) != "on") {
           item[1] = "on" + item[1];
         };

         if (item[0].detachEvent) {
           item[0].detachEvent(item[1], item[2]);
         };

         item[0][item[1]] = null;
       };
     }
   };
 }();

 addEvent(window,'unload',EventCache.flush);