JavaScript es un lenguaje de programación orientado a eventos, elementos fundamentales para trabajar con las acciones del usuario. En este lenguaje hay dos maneras de ejecutar eventos: de manera declarativa o de manera imperativa. En este post te enseñaremos cómo manejar eventos imperativos en frontend JavaScript, la manera adecuada de declarar eventos.
¿Cómo manejar eventos imperativos en frontend JavaScript?
Cuando hablamos de manejar eventos imperativos en frontend JavaScript, nos referimos a la manera adecuada de declarar eventos en este lenguaje de programación. Como puedes leer en nuestro post sobre eventos en frontend JavaScript, existen dos maneras de ejecutar eventos en este lenguaje: una manera declarativa, en la que vamos a manejar eventos in-line en frontend JavaScript, y una manera imperativa. A continuación, te explicaremos esta última.
Antes de explicarte cómo declarar eventos, te recomendamos revisar la documentación sobre este concepto. Por ello, te invitamos a explorar el artículo acerca de la referencia de eventos en la página oficial de Mozilla Developer Network.
Como su nombre indica, al manejar eventos imperativos en frontend JavaScript usamos una sintaxis imperativa, en la que le decimos al evento qué hacer, en lugar de declararlos. Entonces, seleccionamos el elemento que tiene el evento y le decimos qué debe hacer cuando este evento suceda. Para ello, usaremos lo que llamamos escuchadores, elementos identificados por los comandos addEventListener y removeEventListener.
Con el método addEventListener, podemos añadir varias funcionalidades a un evento por medio de la escucha del evento. Aunque en este post no lo manejaremos, también te contamos que puedes añadir más de un escuchador a un evento. Por su parte, el método removeEventListener nos permite eliminar una funcionalidad declarada anteriormente. Para conocer más sobre estos métodos, te recomendamos leer el post sobre el método addEventListener en Lenguajejs.
A continuación, te mostramos un ejemplo de una sección de código con la que podemos manejar eventos imperativos en frontend JavaScript. Nota que toda esta sección está escrita en un archivo index.js directamente, que luego será llamado mediante la etiqueta script a nuestro archivo HTML:
<script src="./index.js"></script>
Si tienes dudas sobre dónde colocar la etiqueta script en tus proyectos, te invitamos a leer nuestro post sobre dónde ubicar script en tu código.
Separar el código JavaScript del código HTML es fundamental en el método imperativo, pues no mezcla código como si lo haría el método declarativo. Ten en cuenta que es muy diferente importar un archivo JavaScript dentro de un HTML frente a escribir código JS directamente sobre un archivo HTML.
Tras estas explicaciones, te presentamos a continuación nuestro ejemplo. Primero, tenemos un elemento HTML dentro de nuestro archivo index.html:
<button id= 'magicButton'> The time is? </button>En el ejemplo anterior estamos viendo un elemento HTML button con un ID “magic button” y un texto que nos pregunta qué hora es (The time is?). Ahora, dentro de nuestro archivo JavaScript index.js, accedemos a este elemento y añadimos escuchadores para determinar la reacción al evento del button:
document.getElementById ('magicButton').addEventListener ('click', drawTime);
document.getElementById ('magicButton').removeEventListener ('click', drawTime);En las líneas de código anteriores tenemos un acceso a este elemento, dado por document.getElementById (‘magic button’). Realmente tenemos dos accesos, uno acompañado de un comando addEventListener y otro de removeEventListener.
Aunque en este caso no lo hemos hecho, cuando repetimos acceso a un elemento podemos guardar este proceso en una variable. Esto hará más sencillo acceder al elemento repetidas veces.
const magicButtonElement = document.getElementById ('magic button')
Como puedes ver, la primera línea está añadiendo un listener a un evento. ¿A qué evento? Al clic. ¿Y qué hay que hacer cuando este clic suceda? Pues ejecutar la función drawTime. De esta manera, podemos manejar eventos imperativos en frontend JavaScript. Aquí solo nos faltaría definir qué hace exactamente la función drawTime, pues podría, por ejemplo, hacer que se pinte la hora actual por pantalla sobre un párrafo HTML con un ID demo:
function drawTime ( ) {
document.getElementById ("demo").innerHTML = new Date ( );
}Ahora que sabes cómo manejar eventos imperativos en frontend JavaScript, te invitamos a seguir aprendiendo con nosotros sobre este y otros lenguajes de programación fundamentales para el desarrollo web en nuestro Desarrollo Web Full Stack Bootcamp. Al finalizar este espacio de formación intensiva, dominarás lenguajes y herramientas como JSX, HTML, CSS, JavaScript, Axios y React. ¿Te animas a seguir aprendiendo para darle un giro a tu vida e impulsar tu carrera? ¡Inscríbete ya!
