tecla y teclados: ¿por qué el código de tecla es diferente?

Question

relacionadas: JavaScript KeyCode vs CharCode

Aquí hay un código que puede probar en casa o en un jsfiddle:

el.addEventListener('keyup', function(e) { 
    console.log('Keyup event'); 
    console.log(e.keyCode); 
}); 
el.addEventListener('keypress', function(e) { 
    console.log('Keypress event'); 
    console.log(e.keyCode); 
}); 

¿Por qué es el código clave diferente?

Entiendo por qué uno debe usar la tecla presionar solamente, pero lo que no entiendo es cómo dos eventos clave, dados la misma tecla de golpe en el teclado, dan diferentes códigos de tecla.

PD: No me preocupo por el soporte de navegadores antiguos, probé esto en Chrome y me sorprendió y no pude encontrar una explicación.

Answer 1

Los eventos son para fines completamente diferentes. Use keyup y keydown para identificar las claves físicas y keypress para identificar los caracteres escritos. Las dos son tareas fundamentalmente diferentes con diferentes eventos; no intentes mezclar los dos. En particular, keyCode en keypress eventos suele ser redundante y no debe utilizarse (excepto en el IE más antiguo, pero consulte el documento vinculado a continuación para obtener más información al respecto); para las pulsaciones de teclas imprimibles, generalmente es lo mismo que which y charCode, aunque hay alguna variación entre los navegadores.

Jan Wolter's article on key events, ya enlazado en en otra respuesta, es la palabra definitiva sobre este tema para mí y tiene tablas que describen qué devuelve cada una de las diferentes propiedades para cada tipo de evento clave y cada navegador.

Answer 2

Hay un good article on quirksmode.org respondiendo exactamente esa pregunta. También es posible que desee mirar Unixpapa's results.

Answer 3

Bueno, me encontré con una diferencia cuando estaba tratando de copiar la entrada del usuario de una entrada del formulario a otra parte del formulario, que había bloqueado para que los usuarios puedan editar. Lo que encontré fue que cada vez que un usuario pasaba a la siguiente etiqueta con la tecla al completar la entrada, se perdía una última entrada del teclado en la entrada copiada cuando utilizaba eventListener para presionar teclas y esto se resolvió al usar la tecla.

Así que, en conclusión Keypress escucha el estado en el instante en que se pulsa la tecla, dejando a un lado el resultado de la pulsación de tecla, mientras que keyup escucha el estado del sistema después de que la clave ha sido presionado y incluye el resultado de la tecla presionar