Los oyentes de eventos de JavaScript vs controladores de eventos

Question

Ok, he estado tratando de resolver esto durante mucho tiempo y finalmente tener el tiempo para investigar. Como sugiere el título "¿Cuál es la diferencia"? Sé que esto funciona como yo quiero que haga.

    addLoadEvent(converter);

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

Pero esto no es así, y sólo se ejecuta una vez.

    addLoadEvent(converter);

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

Lo que yo soy yo que carece ... ¿Cuál es la diferencia? Cualquier enlace a este tema sería de gran ayuda.

Mi suposición era que el operario debe actuar como el oyente, pero no lo hace. De hecho ni siquiera necesita ser agregado a la función addLoadEvent un oyente?

Answer 1

addEventListener añade una función de controlador de eventos para el evento. No puede haber un número ilimitado de controladores de eventos de esta manera.

Configuración onxxxxx juegos el controlador de eventos a que una función .

Desde el Mozilla Developer Central :

  

addEventListener registra un solo detector de eventos en un solo objetivo. El destino del evento puede ser un único nodo en un documento, el documento en sí, una ventana, o un XMLHttpRequest.

     

Para registrar más de un detectores de eventos para el objetivo, llamar a addEventListener para el mismo objetivo, pero con diferentes tipos de eventos o parámetros de captura.

este capítulo del mismo documento para una comparación de la vieja manera onxxxx.

Answer 2

Desde la escritura ECMA es tan flexible en su núcleo - que permite asignar funciones, métodos ... ... prácticamente todo a una variable, que tiene una funcionalidad adicional para adjuntar una función de una variable como "addEventListener" es mi todo significa un mal diseño.

Así que si usted me pregunta, le diré todo lo que dijo Pekka, que estoy completamente de acuerdo, y también que:

pixels.onkeydown = updateNode;

es el lenguaje de script ECMA comunicado natural y:

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

es suplemento DOM exagerada que innecesaria confunde a muchos desarrolladores haciéndoles pensar lo que ocurrirá si se establece que una vez que la primera manera, y algún que otro guión luego potencialmente pueden configurar usando la otra manera:)