Manejadores de eventos en Javascript: Detectar para ejecutar
Javascript aplica sintaxis que funcionan como detectores de uno o más eventos cuando ese evento ha sido activado, ya sea por la intermediación del propio usuario (dando un click o tocando un elemento activable) o por medio otra función (por ejemplo, una para conteo regresivo).
No debemos confundir un evento con una acción de resultado. En el contexto de interaccción sobre máquinas un evento es una acción que el sistema ha recibido por el usuario en pos de un resultado que el usuario espera.
Si estamos frente a un cajero automático de banco, entonces un primer evento sería el de insertar la tarjeta por un usuario. Si estamos ante un videojuego, un evento sería el de presionar ciertos botones por un jugador.
Por lo tanto, cada evento ocasionado por el usuario, pero detectado (o 'escuchado') por el sistema, dará (o manejará) una acción o resultado específico: el cajero pedirá la clave del usuario, mientras que el personaje del videojuego golpeará al oponente. Primero ocurre el evento (dado por el humano); luego, la acción o resultado (dada por el sistema). Los event handlers en Javascript vinculan, detectan y activan eventos junto con sus resultados.
He hallado algunas explicaciones con respeto a los eventHanders que, a mi parecer, solo confunden. Expresar únicamente que los event Handlers 'capturan eventos' o 'escuchan eventos' simplemente no ayudan a entender su fundamento. En resumen, los event handlers son sintaxis de código que detectan la acción del usuario y dan respuestas hacia él, pero desde el sistema.
Para cada evento posible, los lenguajes como Javascript cuentan con uno o más manejadores de eventos según diversos contextos de interacción usuario-máquina. Su estudio es amplio y vale la pena revisarlos. En esta lista categorizé unos pocos según el tipo de interacción. Si el lector desea profundizar en ellos puede revisar diversos recursos audiovisuales, bibliográficos y en línea, buscando con las siguienres palabras clave: javascript event handler, mouse events, touch events.
El uso de los event handlers en Javascript requiere atender su sintaxis propia, como al vincular las clases de elementos interactivos y su invocación dentro de los event handlers. Además de comprender la construcción de la estructura de una página web y sus elementos internos, como el DOM (Document Object Model). Recomiendo fuertemente un estudio profundo de esos ámbitos. Dejo aquí una una amplia introducción a ello.
En el ejemplo siguiente, un evento (tocar el recuadro) dará una acción/resultado en pantalla. Esa sencilla animación está ejecutada a casi 60 cuadros (redibujos de la animación) por segundo.
- El control y ajuste de los cuadros por segundo es un tema que espero estudiar y exponer en esta web muy pronto, pues influye en el desempeño y fluidez de animaciones más complejas, como las mostradas en videojuegos desde la web.
Adjunto el códido necesario para esa simple interacción:
En HTML
<div id="elementoJugable00"> </div>
En CSS
/* Estilo */
#elementoJugable00{width: 100px;height: 100px;background: peru;}
/* Active para hacer click */
#elementoJugable00:active{transform: scale(1.25);}
En Javascript
// Apunta elemento ID (ojo con sintaxis ID en HTML y CSS)
var apuntarElemento00 = document.getElementById("elementoJugable00");
// Declarar el estado del elemento como 'inalterado'
var estadoAlterado = false;
// Vincula elemento al evento y luego a la accion resultante
apuntarElemento00.addEventListener("click", function(){
// Estado igual a false
// Cuando no haya ocurrido la interacción...
if (estadoAlterado){
// ...todo a valores iniciales a cero
apuntarElemento00.style.background = 'peru';
apuntarElemento00.style.transform = "translate(0px) rotate(0deg) scale(1)";
apuntarElemento00.style.borderRadius = "0px";
} else {
// Estado igual a true
// Cuando sí haya ocurrido la interacción, los valores cambian
// Altera color
apuntarElemento00.style.background = 'red';
// CUIDADO. Cada nueva propiedad por separado sobreescribe la anterior
//apuntarElemento00.style.transform = "translate(100px)";
//apuntarElemento00.style.transform = 'rotate(45deg)';
// SOLUCIÓN: Adjuntar cada alteración en una sola propiedad
apuntarElemento00.style.transform = "translate(200px) rotate(45deg) scale(0.5)";
// Método de transición simple
// apuntarElemento00.style.transition = "transform 0.5s ease, background 0.5s ease";
// Transición con cubid bezier
// 1s agilidad de la animación
apuntarElemento00.style.transition = "transform 1s cubic-bezier(0.68, -0.75, 0.27, 1.55), background 0.5s ease-in-out";
apuntarElemento00.style.borderRadius = "20px";
}
// Cuando las condicionales se hayan efectuado, RESET el valor de estadoAlterado a su inverso
// es decir, luego del else, estadoAlterado = true, por lo que ahora el estadoAlterado debe volver a false
estadoAlterado = !estadoAlterado;
// Web para calcular bezier
// https://www.cssportal.com/css-cubic-bezier-generator/
});
Debo aclarar que la animación mostrada arriba también es posible generarla desde el lenguaje de estilo CSS (Cascade Style Sheets), incluso con menos cantidad de código y proceso de cálculo desde el navegador. Pero el objetivo de usar la interacción dada desde Javascript permite hoy, al año 2024 y mediante más sintaxis, agregar otros resultados de interacción, como sonido, simulación de físicas (gravedad y colisión) entre otros. En esta y esta sección ya expliqué brevemente cómo el lenguaje CSS puede ser usado desde la interacción con elementos en pantalla.
Siguiente: Ejemplos del uso del criterio de Programación Orientada a Objetos en Javascript