javascript - change - addeventlistener mouseover

¿Uso correcto de addEventListener()/attachEvent()?

Question

Me pregunto cómo usar addEventListener respectivamente attachEvent correctamente?

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

 // ...

o

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

 // ...

?

¿Es seguro este navegador cruzado o debería ser mejor con algo como esto?

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);
// ...

Y: Digamos que myfunc2 es solo para IE 7. ¿Cómo modificar el método correcto / preferido en consecuencia?

Answer 1

Cualquier persona que continúe con esta discusión y no encuentre la respuesta que estaba buscando.
http://dustindiaz.com/rock-solid-addevent
Esta es una de las soluciones más elegantes que encontré para aquellos de nosotros con restricciones en el uso de los marcos.

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

Answer 2

El uso de ambos es similar, aunque ambos toman una sintaxis ligeramente diferente para el parámetro de evento:

addEventListener ( referencia mdn ):

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

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

Lista de eventos para addEventListener .

attachEvent ( referencia msdn ):

obj.attachEvent(''onclick'', callback);

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

Lista de eventos para attachEvent .

Argumentos

Para ambos métodos, los argumentos son los siguientes:
1. Es el tipo de evento.
2. Es la función para llamar una vez que el evento ha sido activado.
3. ( addEventListener únicamente) Si es verdadero, indica que el usuario desea iniciar la capture .

Explicación

Ambos métodos se utilizan para lograr el mismo objetivo de adjuntar un evento a un elemento.
La diferencia es que attachEvent solo se puede usar en motores de renderizado trident más antiguos ( IE5 + IE5-8 *) y addEventListener es un estándar W3 que se implementa en la mayoría de los otros navegadores (FF, Webkit, Opera, IE9 +).

Como Smitty recomendó, debería echarle un vistazo a este Dustin Diaz addEvent para una implementación sólida de navegador cruzado sin el uso de un marco.

Para un soporte sólido de eventos de navegador cruzado, incluidas las normalizaciones que no obtendrá con la solución de Díaz, use un framework .

* IE9-10 es compatible con ambos métodos, por compatibilidad con versiones anteriores.

Gracias a Luke Puplett por señalar que attachEvent ha sido eliminado de IE11.