Tutorial de jQuery (Parte 4) oyentes de eventos

Hoy vamos a mejorarlo y realmente mostraremos dónde brilla jQuery - eventos. Si siguió los tutoriales anteriores, ahora debe tener una comprensión bastante buena de la estructura básica del código de jQuery Tutorial de jQuery - 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 para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con un código y aprendamos cómo ... (y todas las horribles llaves que lo acompañan), así como cómo encontrar elementos del DOM y algunas de las cosas que puede hacer para manipular 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 para principiantes en curso a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... También le mostré cómo acceder a la consola del desarrollador en Chrome. Resolver problemas del sitio web con las herramientas de desarrollador de Chrome o Firebug Resolver problemas del sitio web con las herramientas de desarrollador de Chrome o Firebug. Si hasta ahora ha seguido mis tutoriales de jQuery, es posible que ya se haya encontrado algunos problemas de código y no se sabe cómo solucionarlos. Cuando se enfrenta a un bit de código no funcional, es muy ... y cómo podría 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: hacer clic, desplazarse 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 se activa ese evento, pueden reaccionar de alguna manera.

Por ejemplo, tocar la pantalla de tu iPhone generará un solo “evento de toque” con una coordenada x, y de exactamente donde tocaste. Si tocó 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 era solo 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 tal vez la velocidad. Los eventos nos brindan 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 de clic, que se activa cada vez que un usuario hace clic en un elemento. Esto no tiene por qué ser específico “botón” - puede adjuntar un detector de eventos a cualquier cosa en la pantalla, pero como desarrollador web, obviamente debe hacerlo intuitivo. Crear un pseudo botón a partir de la letra una 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, usando on ():

$ (selector) .on (evento, acción);

Para escuchar un “hacer clic” evento en cualquier elemento con la clase .Haz click en mi, y luego registre un mensaje en la consola que contenga texto del elemento en el que hizo clic, haría:

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

Debería poder ver que la acción que hemos incorporado aquí es una función anónima que utiliza el esta selector (que se refiere a cualquier objeto con el que jQuery esté tratando actualmente), en este caso, en el que se hizo clic. Luego extraemos el texto de ese objeto cliqueado y lo registramos en la consola. Fácil, cierto?

Detener la acción predeterminada:

En algún momento, querrá adjuntar a algo como un enlace o botón de envío de formulario que generalmente hace otra cosa. En ese caso, es muy probable que no desee que se realice esa acción original; en cambio, desea hacer un poco de AJAX elegante o magia especial de jQuery.

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

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

Algunos cambios aquí: en primer lugar, nos estamos uniendo a la enviar evento en lugar de clic. Esto es más apropiado cuando se trata con un formulario, ya que el usuario podría espacio de tabulación, golpear entrar, o golpear un enviar botón: todo lo cual desencadenaría la acción predeterminada del formulario. También estamos pasando la variable de evento a la función anónima, para que podamos referirnos a datos de eventos. Luego hemos usado el event.preventDefault () en combinación con falso retorno para detener todas las acciones habituales de completar.

En este caso, solo se registra 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, utilizamos el método on para escuchar un evento, pero también puede activar un evento manualmente al llamarlo como método. Es difícil ver por qué podría usar esto para forzar un “hacer 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, un mensaje instructivo sobre el formato a utilizar, por ejemplo. Pero también podría usarlo para forzar al usuario a ingresar al campo de nombre de usuario cuando la página se haya cargado, para que puedan comenzar a escribir de inmediato sus datos de inicio de sesión.

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

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

Por ahora, practique adjuntando 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 de eventos.

Lo dejaré allí hoy cuando nos acercamos al final de esta mini-serie de tutoriales de jQuery. Al final, debes tener la confianza suficiente para lanzar un poco de jQuery en tu 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 imagen: pantalla táctil a través de Shutterstock