¿Qué son los eventos en JQuery?
05/02/2018

¿Qué son los eventos en JQuery?

Programación y Diseño Web

JQuery es una biblioteca Javascript que enriquece el aspecto de nuestra página web gracias a que adorna efectos como el de abrir una ventana nueva, desplegar un menú y otras características que, pese a que podemos usar JS para ello, esto nos da un elenco de opciones más a nuestra mano. Si bien es cierto que facilita las tareas si tenemos que hacer muchas de estas operaciones, no es recomendado usarlo si nuestra página es muy simple, ya que carga de forma innecesaria lo que estamos haciendo. Aún así es muy útil y merece la pena aprender a usarlo. Pero, ¿qué son los eventos? Hoy os explicaré que es un evento y como JQuery los integra en sus entrañas para que podamos usarlo en nuestro código JS de nuestra página web. Vamos allá.

Los eventos en JQuery

Un evento, en el mundo de la programación, se trata de una acción que crea una reacción. Por ejemplo, tocar la pantalla, presionar un botón, rellenar de forma incorrecta un formulario. Todas estas interacciones del usuario con nuestro sistema crean eventos. Pero con solo que ocurra la acción no es suficiente, necesitamos una escucha, o listener. Cuando creamos eventos, estamos creando un “ente” que está constantemente escuchando si se efectúa una cierta acción por parte del usuario o del sistema, y cuando eso ocurre, lanza una reacción: si presionamos un botón para mostrar más información, quizá se despliega un dicha información o muestra una ventana modal con ello. Los eventos, por lo tanto, son muy importantes ya que generan todo lo que deseamos controlar y mostrar. Sin eventos, un programa nunca se cerraría o no podríamos dar más posibilidades a nuestros usuarios para que realicen más tareas. Esto lo encontramos en JavaScript, pero también en otros lenguajes como C, Lua o Java. Es posible que no haya una descripción de forma explicita, como en JS, addEventListener, pero el hecho de poner una condición if que esté observando si se realiza cierta acción ya es crear un evento.

Pero, ¿como se hace en JQuery? Hemos dicho que es una biblioteca JS, así que no puede cambiar mucho el tema, ¿verdad? Un poco. Como os he comentado, JQuery trata de facilitar un poco las cosas y directamente solo necesitas declarar el tipo de evento que deseas. Un momento, ¿tipos de evento? Si, hay distintos tipos de evento, sobretodo para el panorama web que podemos controlar incluso la respuesta del servidor. En JS usamos la instrucción addEventListener(“tipo de evento”), mientras que en JQuery asociamos el evento directamente al objeto que queremos con jquery.event(“tipo de evento”). Por ejemplo, supongamos que deseamos detectar cuando el usuario ha presionado la tecla “flecha abajo” en el teclado, haríamos algo así:

var e = jQuery.Event( "keydown", { keyCode: 64 } );

Aquí estamos guardando en una variable llamada “e” un evento que estará observando cuando el usuario presione la tecla “keyedown”. El siguiente paso es realizar algo con este evento, ya que actualmente lo tenemos guardado pero no estamos haciendo nada con él. Aquí viene el siguiente paso: el lanzador o trigger. En Jquery tenemos que definir un disparador de este evento, y lo hacemos del siguiente modo:

jQuery( "body" ).trigger( e );

Donde body es el cuerpo de la página web, ya que, recordemos que en el DOM (la estructura web de nuestra página) la etiqueta que engloba dicho cuerpo se llama, de forma totalmente ingeniosa, “body”, al igual que la cabecera es el “head” y los párrafos son p. Aquí observamos lo siguiente, y es que podemos guardar en variables dichos eventos y no necesitamos declararlos siempre que queramos añadirlo a alguna parte de la web, con tenerlo en la “recamara” luego los podemos rehusar con el método “trigger” de JQuery, dándonos una flexibilidad mayor al construir la lógica de nuestro producto web. Si quisiéramos hacer lo mismo con JS puro, deberíamos hacer addEventListener cada vez que queremos añadir dicho evento, en otras palabras, nos vamos a ahorrar varias líneas de código si tenemos una página con muchos menús, efectos o interacciones por parte del usuario.

No obstante, como decía al principio, si lo único que queremos de Jquery es incorporar un par o tres de eventos, no os recomiendo importar dicha biblioteca. El simple hecho de que tenga su propio peso para la carga del servidor no nos sale a cuenta si la funcionalidad que queremos usar es mínima, es mucho más recomendable hacerlo a mano, aunque sea más pesado de codificar. Al fin y al cabo nos interesa que nuestra web se cargue rápido para le usuario y sea fluida.

Y esto son los eventos en JQuery. Pensad que esto no es todo en realidad, hay muchos eventos, cada uno para una tarea distinta e incluso podéis haceros vuestros propios eventos para que hagan lo que deseáis en cada momento, pero esto lo dejaremos para otro post, ya que este tema da para mucho y requiere profundizar más en el uso de esta biblioteca JavaScript.

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Big data y Hadoop
12/12/2018
Thaís Balagueró

Big data y Hadoop

En este post definiremos más en detalle que es Hadoop, cuando aparece y qué representa dentro de Big Data.

Tutorial Unity: cómo usar los If Statements
19/11/2018
Jordi Mula

Tutorial Unity: cómo usar los If Statements

Una de las estructuras que podemos encontrar de forma más habitual en un código de programación son las estructuras o sentencias condicionales. Vamos a ver con más...

¿Qué son los datasets y los dataframes en el Big Data?
13/11/2018
Thaís Balagueró

¿Qué son los datasets y los dataframes en el Big Data?

En el post de hoy vamos a explicar que son los datasets y los dataframes en el contexto de Big Data. Igual que todo el tema relacionado con el Big Data y la gestión d...