¿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.

Por qué estudiar Programación en PHP, Javascript y MySQL es una buena idea
13/06/2018
Albert Miró

Por qué estudiar Programación en PHP, Javascript y MySQL es una buena idea

¿Estas pensando en realizar un curso en programación? En este post compararemos algunos!

Qué son las metodologías ágiles y cómo aplicarlas a un proyecto
28/05/2018
Albert Miró

Qué son las metodologías ágiles y cómo aplicarlas a un proyecto

Existen métodos para aumentar tus niveles de productividad, ya hay muchas empresas que las ponen en practica. Conoce algunas de ellas.

Qué es la ciberseguridad y cual es el perfil profesional que buscan las empresas
24/04/2018
Carlos Yañez

Qué es la ciberseguridad y cual es el perfil profesional que buscan las empresas

La ciberseguridad es una preocupación cada vez mayor dentro de las empresas por el impacto que puede representar

Comentarios

No hay comentarios.

Añadir nuevo comentario