Gli ascoltatori di eventi JavaScript vs gestori di eventi

Question

Ok, ho cercato di capire questo fuori per molto tempo e che finalmente hanno il tempo per indagare. Come suggerisce il titolo "Qual è la differenza"? So che questo funziona il modo in cui voglio che.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

Ma questo non lo fa, e viene eseguito solo una volta.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

Quello che sto mi manca ... Qual è la differenza? Alcun legame con il tema sarebbe utile.

La mia ipotesi è che il gestore dovrebbe agire come l'ascoltatore, ma non è così. In effetti fa un ascoltatore nemmeno bisogno di essere aggiunti alla funzione addLoadEvent?

Answer 1

addEventListener aggiunge una funzione di gestore di eventi per l'evento. Non ci può essere un numero illimitato di gestori di eventi in questo modo.

Impostazione onxxxxx set il gestore di eventi per che una funzione .

Mozilla Developer centrale :

  

addEventListener registra un singolo listener di eventi su un unico obiettivo. Il bersaglio evento può essere un singolo nodo in un documento, il documento stesso, una finestra o un XMLHttpRequest.

     

Per registrare più di un listener di eventi per il target, chiamare addEventListener per lo stesso obiettivo, ma con differenti tipi di eventi o parametri di acquisizione.

E vedere questo capitolo dello stesso documento per un confronto tra il vecchio modo onxxxx.

Answer 2

Dal momento che lo script ECMA è così flessibile nel suo nucleo - che consente di assegnare le funzioni, metodi ... praticamente tutto ... a una variabile, con una funzionalità aggiuntiva per collegare una funzione a una variabile, ad esempio "addEventListener" è il mio tutto significa cattivo design.

Quindi, se mi chiedete, vi dirò tutto quello che ha detto Pekka, che sono completamente d'accordo, e anche che:

pixels.onkeydown = updateNode;

è ECMA script language dichiarazione naturali, e:

pixels.addEventListener("keydown", updateNode, true);

è supplemento DOM esagerato che inutili confonde molti sviluppatori facendo loro credere che cosa accadrà se si imposta una volta che il primo modo, e qualche altro script più tardi potenzialmente possono impostare utilizzando il contrario:)