Javascript aggiunge eventi implementazione della funzione cross-browser: usa attachEvent / addEventListener vs eventi in linea

Per aggiungere eventi potremmo utilizzare questa semplice prima soluzione :

function AddEvent(html_element, event_name, event_function) { if(html_element.attachEvent) //Internet Explorer html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); else if(html_element.addEventListener) //Firefox & company html_element.addEventListener(event_name, event_function, false); //don't need the 'call' trick because in FF everything already works in the right way } 

o questa seconda soluzione (che aggiunge eventi in linea):

 function AddEvent(html_element, event_name, event_function) { var old_event = html_element['on' + event_name]; if(typeof old_event !== 'function') html_element['on' + event_name] = function() { event_function.call(html_element); }; else html_element['on' + event_name] = function() { old_event(); event_function.call(html_element); }; } 

Questi sono entrambi browser incrociati e possono essere utilizzati in questo modo:

 AddEvent(document.getElementById('some_div_id'), 'click', function() { alert(this.tagName); //shows 'DIV' }); 

Dato che ho la sensazione che attachEvent/addEventListener sia usato più in giro per gli eventi che gestiscono le implementazioni, mi chiedo:

Ci sono degli svantaggi / svantaggi nell’usare la seconda soluzione di cui potrei essere a conoscenza?

    Posso vederne due, ma sono interessato a più (se ce ne sono):

    1. la seconda soluzione rimedia l’HTML interno degli elementi aggiungendo eventi in linea
    2. Usando la seconda soluzione posso facilmente rimuovere tutte le funzioni associate a un certo tipo di evento ( html_element['on' + event_name] = null ), ma non posso usare detachEvent/removeEventListener per rimuovere esattamente una funzione specifica.

    Qualsiasi risposta del tipo: “usa jQuery” o qualsiasi altro FW sono inutili!

    Con la seconda soluzione, devi chiamare manualmente le funzioni precedenti, rendendo difficile rimuovere specifici listener (che, per me, sembra qualcosa che preferiresti piuttosto che cancellare tutti gli ascoltatori), mentre sulla prima soluzione, puoi solo cancellarli tutti allo stesso tempo, a meno che non si desideri emulare la prima funzionalità.

    Personalmente, io uso sempre la prima soluzione, perché ha il vantaggio di non doversi preoccupare di cancellare altri possibili ascoltatori di eventi.

    Il wiki di mozilla elenca anche i vantaggi che la prima soluzione funziona su qualsiasi elemento DOM, non solo gli elementi HTML, e che consente un controllo a grana fine sulla fase in cui l’ascoltatore viene triggersto (cattura e gorgogliamento) con il terzo argomento.

    userei entrambi i codici come questo

     function addEvent(html_element, event_name, event_function) { if (html_element.addEventListener) { // Modern html_element.addEventListener(event_name, event_function, false); } else if (html_element.attachEvent) { // Internet Explorer html_element.attachEvent("on" + event_name, event_function); } else { // others html_element["on" + event_name] = event_function; } };