Ouvintes JavaScript Eventos vs manipuladores de eventos

Question

Ok, eu tenho tentado descobrir isso por um longo tempo e agora finalmente tenho tempo para investigar. Como o título sugere "Qual é a diferença?" Eu sei que isso funciona da maneira que eu quero.

    addLoadEvent(converter);

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

Mas isso não, e só é executada uma vez.

    addLoadEvent(converter);

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

O que eu estou me falta ... Qual é a diferença? Todos os links para o tópico seria útil.

A minha suposição era de que o manipulador deve agir como o ouvinte, mas isso não acontece. Na verdade é que um ouvinte ainda precisam ser adicionados à função addLoadEvent?

Answer 1

addEventListener acrescenta uma função manipulador de eventos para o evento. Não pode haver um número ilimitado de manipuladores de eventos desta forma.

Configuração onxxxxx sets o manipulador de eventos para que uma função .

A partir da Mozilla Developer Central :

addEventListener registra um único ouvinte de evento em um único alvo. O destino de evento pode ser um único nó em um documento, o próprio documento, uma janela, ou um XMLHttpRequest.

Para se inscrever mais de um ouvintes de eventos para o alvo, chamada addEventListener para o mesmo alvo, mas com diferentes tipos de eventos ou parâmetros de captura.

E veja este capítulo do mesmo documento para uma comparação da velha maneira onxxxx.

Answer 2

Desde ECMAScript é tão flexível em seu núcleo - permitindo às funções ceder, métodos ... praticamente tudo ... para uma variável, tendo uma funcionalidade adicional para anexar uma função a uma variável como "addEventListener" é meu tudo meios mau design.

Então, se você me perguntar, vou dizer-lhe tudo o que Pekka disse, que eu concordo completamente, e também que:

pixels.onkeydown = updateNode;

é ECMA script language declaração natural, e:

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

é suplemento DOM exagerado que confunde desnecessários muitos desenvolvedores fazendo-os pensar o que vai acontecer se você configurá-lo uma vez que a primeira maneira, e alguns outro script mais tarde potencialmente pode configurá-lo usando o outro lado:)