Tutorial jQuery (Parte 4) - Escuchas de eventos

Anuncio

Hoy vamos a mejorarlo y realmente mostraremos dónde brilla el jQuery: los eventos . Si siguió los tutoriales anteriores, ahora debe tener una comprensión bastante buena de la estructura de código básica de jQuery jQuery Tutorial - Introducción: conceptos básicos y selectores Tutorial de jQuery - Introducción: conceptos básicos y selectores La semana pasada, hablé sobre la importancia de jQuery a cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con un poco de código y descubramos cómo ... Leer más (y todas las llaves horribles que lo acompañan), así como también cómo encontrar elementos del DOM y algunas cosas que puede hacer para manipularlos Introducción a jQuery (Parte 2): Métodos y funciones Introducción a jQuery (Parte 2): Métodos y funciones Esto es parte de una introducción continua para principiantes a la serie de programación web de jQuery. La Parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y selectores. En la parte 2, continuaremos con ... Leer más. También le mostré cómo acceder a la consola de desarrollador en Chrome Figure Out Problemas del sitio web con Chrome Developer Tools o Firebug Averiguar problemas del sitio web con Chrome Developer Tools o Firebug Si ha seguido mis tutoriales de jQuery hasta ahora, es probable que ya haya topado con algunos problemas de código y no saben cómo solucionarlos. Cuando se enfrenta con un bit de código no funcional, es muy ... Lea más y cómo puede usarlo para depurar su código jQuery.

Los eventos, entre otros usos, le permiten reaccionar ante las cosas que suceden en la página y las interacciones del usuario, haciendo clic, desplazándose y todas esas cosas elegantes.

¿Qué es un evento de todos modos?

Para aquellos nuevos en la programación que involucra una interfaz gráfica de algún tipo, los eventos se refieren a cualquier tipo de interacción entre el usuario y la aplicación; o puede ser generado internamente por algún otro proceso. Las aplicaciones eligen qué eventos "escuchar", y cuando ese evento se desencadena, pueden reaccionar de alguna manera.

Por ejemplo, al tocar en la pantalla de su iPhone, se generará un solo "evento tap" con una coordenada x, y de donde exactamente tocó. Si tocaba un objeto en particular, como un botón, es probable que el botón estuviera escuchando ese evento y realice alguna acción en consecuencia. Si solo fuera una parte en blanco de la interfaz, no se adjuntó nada al evento y, por lo tanto, no sucederá nada.

Arrastrar el dedo por la pantalla generaría otro evento, uno que incluye información sobre el punto inicial y final del movimiento de arrastre, y quizás la velocidad. Los eventos nos proporcionan una manera fácil de reaccionar a las cosas que suceden .

Fácil: haciendo clic

Quizás el evento más fácil de escuchar es el evento click, disparado cada vez que un usuario hace clic en un elemento. No es necesario que sea un "botón" específico: puede conectar un detector de eventos a cualquier elemento de la pantalla, pero, como desarrollador web, es obvio que debe ser intuitivo. Crear un pseudo-botón fuera de la letra a es oculto dentro de un párrafo de texto es posible, pero algo estúpido.

Los métodos para adjuntar un detector de eventos han cambiado significativamente a lo largo de los años a medida que jQuery se ha desarrollado, pero este es el método aceptado actualmente, que usa on ():

$(selector).on(event, action); 

Para escuchar un evento de "clic" en cualquier elemento con la clase .clickme, y luego registrar un mensaje en la consola que contiene el texto del elemento al que se hizo clic, usted haría:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Debería poder ver que la acción que hemos incrustado aquí es una función anónima que utiliza el selector this (que se refiere a cualquier objeto con el que jQuery se encuentre actualmente), en este caso, el elemento sobre el que se hizo clic. Luego extraemos el texto de ese objeto cliqueado y lo registramos en la consola. Fácil, ¿verdad?

Detener la acción predeterminada:

En algún momento, querrá adjuntar algo como un enlace o botón de envío de formulario que generalmente hace algo más. En ese caso, es bastante probable que no desee que se realice esa acción original; en su lugar, desea hacer alguna fantasía AJAX o magia jQuery especial.

Para evitar que ocurra esa acción predeterminada, tenemos un método práctico llamado preventDefault. Obviamente. Veamos cómo funcionaría eso cuando se trata de enviar un botón para un formulario

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Aquí hay algunos cambios: en primer lugar, nos estamos uniendo al evento de envío en lugar de hacer clic. Esto es más apropiado cuando se trata de un formulario, ya que el usuario puede usar tab-space, presionar enter o presionar un botón de enviar ; todo lo cual activaría la acción predeterminada del formulario. También pasamos la variable de evento a la función anónima, de modo que podemos referirnos a los datos del evento . Luego usamos el evento.preventDefault () en combinación con return false para detener la finalización de todas las acciones habituales.

En este caso, solo está registrando el evento en la consola, pero en realidad es probable que tenga un controlador AJAX aquí, que abordaremos en la próxima lección.

Los eventos también pueden ser activados por usted

En los últimos dos ejemplos, usamos el método on para escuchar un evento, pero también puede activar manualmente un evento llamándolo como un método. Es difícil ver por qué podría usar esto para forzar un "clic", pero tiene más sentido si miramos el evento de enfoque.

El enfoque generalmente se usa con campos de entrada para disparar un mensaje cuando el usuario hace clic en el cuadro para ingresar texto, por ejemplo, un mensaje de instrucción sobre el formato que se va a utilizar. Pero también podría usarlo para forzar al usuario al campo de nombre de usuario cuando la página se haya cargado, para que pueda comenzar a escribir inmediatamente sus datos de inicio de sesión.

 $(document).ready(function(){ $('#username'.focus(); }); 

Si también hubiera adjuntado un detector de eventos de foco a ese campo de nombre de usuario, también se activaría cuando forzó el enfoque. Por lo tanto, los eventos pueden activarse y escucharse.

Por ahora, practique atando a varios eventos en la página - puede encontrar una lista completa de todos los eventos disponibles aquí - recuerde usar preventDefault si es un enlace o botón, y vea qué salida obtiene de la consola sobre los datos del evento.

Lo dejaré allí hoy cuando nos acercamos al final de esta mini serie de tutoriales de jQuery. Debería, al final de la misma, tener la confianza suficiente para arrojar algo de jQuery en su página y hacer que haga algo. La próxima semana veremos AJAX, una parte importante de la web moderna que le permite cargar y enviar solicitudes en segundo plano sin interrumpir al usuario.

Como siempre, comentarios, preguntas, comentarios y problemas son bienvenidos a continuación.

Crédito de la imagen: pantalla táctil a través de Shutterstock