Uso corretto di addEventListener () / attachEvent ()?

Mi chiedo come utilizzare addEventListener rispettivamente attachEvent correttamente?

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

?

Questo cross-browser è sicuro o dovrei andare meglio con qualcosa del genere:

 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: Supponiamo che myfunc2 sia solo per IE 7. Come modificare il metodo corretto / preferito di conseguenza?

L’utilizzo di entrambi è simile, sebbene entrambi assumano una syntax leggermente diversa per il parametro dell’evento:

addEventListener ( riferimento mdn ):

 obj.addEventListener('click', callback, false); function callback(){ /* do stuff */ } 

Elenco di eventi per addEventListener .

attachEvent ( riferimento msdn ):

 obj.attachEvent('onclick', callback); function callback(){ /* do stuff */ } 

Elenco degli eventi per attachEvent .

argomenti

Per entrambi i metodi gli argomenti sono i seguenti:
1. È il tipo di evento.
2. È la funzione da chiamare una volta che l’evento è stato triggersto.
3. ( addEventListener only) Se true, indica che l’utente desidera avviare l’ acquisizione .

Spiegazione

Entrambi i metodi sono utilizzati per raggiungere lo stesso objective di colbind un evento a un elemento.
La differenza sta nel fatto che attachEvent può essere utilizzato solo su vecchi motori di rendering trident ( IE5 + IE5-8 *) e addEventListener è uno standard W3 implementato nella maggior parte degli altri browser (FF, Webkit, Opera, IE9 +).

Come suggerito da Smitty , dovresti dare un’occhiata a questo Densa Diaz addEvent per una solida implementazione cross-browser senza l’uso di un framework.

Per un solido supporto agli eventi cross browser, incluse le normalizzazioni che non si ottengono con la soluzione Diaz, utilizzare un framework .

* IE9-10 supporta entrambi i metodi, per compatibilità con le versioni precedenti.

Grazie a Luca Puplett per aver ricordato che attachEvent è stato rimosso da IE11.

Chiunque stia ancora toccando questa discussione e non trovando la risposta che cercava è stato il checkout:
http://dustindiaz.com/rock-solid-addevent
Questa è una delle soluzioni più eleganti che ho trovato per quelli di noi con restrizioni sull’utilizzo dei framework.

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