Onkeypress: mejor evitarlo
- 3 de Abril 2008
- Accesibilidad, Javascript
Una de las recomendaciones de las WCAG, es la de usar en los scripts manejadores de eventos lógicos en vez de dependientes del dispositivo, o en caso de que no sea posible, proporcionar mecanismos redundantes (dos eventos para la misma función). Así propone usar onkeydown cuando se use onmousedown u onkeypress cuando se use onclick.
http://www.w3.org/TR/WCAG10-HTML-TECHS/#directly-accessible-scripts
Perfecto. El problema está en la consideracion de onclick como un evento dependiente del dispositivo, ya que, a pesar de su nombre, todos los navegadores modernos activan el comportamiento previsto para el elemento asociado al “onclick” al presionar la tecla Enter cuando dicho elemento tiene el foco. Onclick sería más preciso si hubiera sido llamado algo como “onactivate”
Jeremy Keith en DOM Scripting.
El evento onkeypress se dispara con la pulsación de una tecla que, en algunos navegadores como Firefox, incluye la tecla tabulador. Esto supone que si llegamos a un enlace con un evento onkeypress definido y estamos usando el tabulador para navegar, no podremos saltar ese enlace ya que le habremos robado a la tecla tabulador su función original al asignarle la activación de una función javascript.
En esta página se puede ver un ejemplo de uso de onkeypress y sólo onclick. Para un usuario sin ratón navegando con Firefox, el primer enlace “Mostrar algo” supone el fin.
Citando nuevamente a Jeremy Keith, el uso de onkeypress puede causar más daño que beneficio, así que todo lo que necesitamos es onclick para proporcionar control mediante el teclado.
Ahorrar líneas de código
En caso de que tengamos que duplicar la función asociada a un elemento para un segundo evento, siempre será mejor asignar a ese segundo evento el primero que hayamos definido, que duplicar todas las líneas.
En vez de hacer esto:
elemento.onclick = function(){
// instrucciones;
}
elemento.onkeypress = function(){
// vuelvo a copiar las instrucciones;
}
Podemos hacerlo en una línea así:
elemento.onclick = function(){
// instrucciones;
}
elemento.onkeypress = elemento.onclick;
