Introducción:
Estos días programando, tuve problemas con los eventos en javaScript y como ya es costumbre escribo un articulo sobre ello para ayudarme a reforzar lo que aprendí (y para que no se me olvide), así que vamos a ello.
¿Qué es keydown?
Es un evento que llega a ejecutarse cuando presionamos una tecla, específicamente cuando la tecla esta abajo, este método funciona tanto para las teclas que producen un carácter así como también para aquellas que no lo producen.
Una forma de escribir el evento keydown es la siguiente:
window.addEventListener('keydown', Mi_función);
function Mi_función(){
if(e.keyCode == 'Código de la tecla'){
//acción a ejecutar
}
}
Donde:
window: Es el objeto que contiene todo el objeto document, podríamos decir que es el nodo padre o el objeto con mayor jerarquía.
Imagen basada en la explicación de kj
document: El objeto document contiene todo lo que hay dentro de una página web. Ejemplo: <html>, <head>, <body>, <div> etc.
addEventListener: Es un método que recibe 2 parámetros el primero es el evento (keydown, keypress, keyup) y el segundo es la función que se ejecuta cuando presionamos la tecla.
Mi_función: El la función que se ejecuta.
Ejemplos usando el evento keydown
Ejemplo 1:
En este caso se ejecutará 1 de las 2 acciones dependiendo de la tecla que llegue a presionar.
window.addEventListener('keydown', test);
function test(event){
if(event.keyCode == '37'){//Tecla con la flecha hacia la izquierda
alert('Tu codigo funciona correctamente');
}
if(event.keyCode == '39'){ //Tecla con la flecha hacia la Derecha
alert('Bien echo =)');
}
}
Ejemplo 2:
En el segundo podemos ver que en lugar de usar el objeto window usamos document y funciona igualmente.
document.addEventListener("keydown", event => {
if(event.keyCode == 13){ //Tecla enter
console.log('hola ney');
}
});
Ejemplo 3:
En este ejemplo no usamos addEventListener.
function presionada(event){
if(event.keyCode == 40){ //Tecla con la flecha hacia abajo
console.log('Me gustan los patitos');
}
}
window.onkeydown = presionada;
Ejemplo 4:
Este ultimo es un ejemplo más completo, podemos ver que con la tecla izquierda(←) cambia el cuadrado al color negro y con la tecla derecha(→) cambia el cuadrado al color verde; aunque estaría mejor ordenado si el javaScript y el css estuvieran en otros documentos (documento.js, style.css).
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<style type="text/css">
#cuadrado{
background-color: #f00e0e;
border-radius: 15px;
height: 110px;
position: relative;
width: 110px;
margin-left: auto;
margin-right: auto;
margin-top: 40vh;
}
</style>
</head>
<body>
<div id="cuadrado"></div>
<script>
document.addEventListener('keydown', colorBlack);
function colorBlack(e){
if(e.keyCode == '37'){
document.getElementById('cuadrado').style.background = '#f4a130';
}
}
window.addEventListener('keydown', colorGreen);
function colorGreen(e){
if(e.keyCode == '39'){
document.getElementById('cuadrado').style.background = '#f00ea2';
}
}
</script>
</body>
</html>
Clic aquí para ver este ultimo ejemplo funcionando y recuerden que para cambiar de color al cuadrado deben hacerlo desde el teclado de su computadora.
Buenos enseñasgos, gracias