Los eventos son la naturaleza esencial del desarrollo web, pues nos permiten preparar nuestro código para reaccionar a las acciones del usuario en nuestra página web. En este post, te enseñaremos qué son y cómo funcionan los eventos en frontend JavaScript para que aprendas a programar tu código y, así, mejorar la experiencia de usuario.
El contexto actual
Es muy común escuchar que JavaScript es un lenguaje orientado a eventos. Esta es la realidad tanto en el desarrollo frontend como en el desarrollo backend de la web.
Si tienes un contexto de desarrollo backend, en el que has trabajado la sección servidora de la web con node.js, estarás acostumbrado a tener una serie de puntos de entrada a tu sistema o endpoints. Normalmente, el usuario consume solo los endpoints que hemos expuesto. Esto nos permite concentrarnos únicamente en preparar la respuesta de estos endpoints específicos.
En el mundo del desarrollo frontend esto se vuelve un poco más complejo. Esto es consecuencia de que, como puedes haber notado desde tu rol de usuario de la web, las aplicaciones actuales tienen muchísimos elementos que funcionan como puntos de entrada. Es decir, hay cientos de botones, posibilidades de scroll, formularios para llenar y demás elementos con los que puede interactuar el usuario.
Por ello, la naturaleza del frontend de la web es mucho más reactiva, lo que significa que se basa en crear reacciones a las acciones del usuario en la web (clic en un botón, scroll, rellenar datos, etc.). Para crear estas reacciones utilizamos los eventos en frontend JavaScript.
¿Qué son los eventos en frontend JavaScript?
En términos sencillos, los eventos en frontend JavaScript notifican a nuestro código sobre lo que ha sucedido en nuestra página web. Es decir, lo que ha ejecutado el usuario. En este sentido, los eventos son elementos que nos permiten manejar nuestro proyecto bajo una filosofía de acción-reacción. Es decir, nos permiten declarar qué sucederá cuando el usuario ejecute determinadas acciones. ¿Cómo? Pues al notificarnos cuando dichas acciones tengan lugar.
Te ponemos un ejemplo: los eventos en frontend JavaScript nos pueden notificar cuando el usuario haya hecho clic en algún lugar (acción). A partir de esta notificación, podremos definir qué función se ejecutará cuando esta acción suceda (reacción).
Para conocer más sobre los eventos en frontend JavaScript, te recomendamos leer el post sobre referencia de eventos en la página oficial de Mozilla Developer Network. Allí encontrarás un listado completo de los eventos actuales y los que han sido deprecados (señalados en rojo). Si tienes dudas sobre cuáles son los eventos que están soportados en qué navegador, te invitamos a revisar la página CanIUse.
¿Cómo funcionan los eventos en frontend JavaScript?
De manera general, los eventos en frontend Javascript funcionan con el uso de callbacks o handlers. Es decir, insertamos estos elementos en un evento para asegurar que nuestro código funcione de manera reactiva.
Ten presente que estos callbacks recibirán siempre como parámetro el objeto que identifica el evento.
Ahora, existen dos maneras de manejar eventos en frontend JavaScript: de manera in-line, es decir, en un modo declarativo, o de manera imperativa. Para conocer cómo funciona cada una de estas maneras de escritura, te invitamos a leer nuestros posts sobre manejar eventos in-line en frontend JavaScript y manejar eventos imperativos en frontend JavaScript.
Tras leer este post, sabes exactamente qué son y cómo funcionan los eventos en frontend JavaScript. Sin embargo, ¡todavía queda mucho por aprender para dominar el mundo del desarrollo web! Por ello, te invitamos a seguir aprendiendo con nosotros sobre programas, herramientas y lenguajes de programación como JavaScript, HTML, CSS y JSX en nuestro Desarrollo Web Full Stack Bootcamp. ¿A qué esperas para impulsar tu carrera profesional y triunfar en el mercado laboral IT? ¡Pide información y descubre cómo alcanzar tus metas!
