Tutorial de jQuery (Parte 4) - Escuchas de eventos

Hoy vamos a subir de nivel y realmente mostrar dónde brilla jQuery - eventos. Si siguió los tutoriales anteriores, ahora debería tener una buena comprensión de la estructura de código básica de jQuery Tutorial de jQuery - Primeros pasos: Conceptos básicos y selectores Tutorial de jQuery - Primeros pasos: Conceptos básicos y selectores La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es impresionante. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Leer más (y todas las llaves horribles que lo acompañan), así como cómo encontrar elementos del DOM y algunas de las cosas que puedes 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 para principiantes en curso a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery de cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Leer más. También le mostré cómo acceder a la consola de desarrolladores en Chrome Figure Out Problemas del sitio web con Chrome Developer Tools o Firebug Problemas de la página web con Chrome Developer Tools o Firebug Si ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya haya encontrado Algunos problemas de código y no se sabe cómo solucionarlos. Cuando se enfrenta con un bit de código no funcional, es muy ... Leer más y cómo puede usarlo para depurar su código jQuery.

Los eventos, entre otros usos, le permiten reaccionar a las cosas que suceden en la página y las interacciones del usuario: hacer clic, desplazarse y todo eso..

Qué es un evento de todos modos?

Para aquellos nuevos en la programación que involucran 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. Aplicaciones elegir qué eventos “escuchar”, y cuando ese evento se activa, pueden reaccionar de alguna manera.

Por ejemplo, tocar en la pantalla de su iPhone generará una sola “evento de tap” con una coordenada x, y de donde tocó exactamente. Si pulsó un objeto en particular, como un botón, es probable que el botón escuchara 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 ocurrirá.

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

Fácil: hacer 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 un específico “botón” - puede adjuntar un detector de eventos a cualquier cosa en la pantalla, pero como desarrollador web, obviamente necesita hacerlo intuitivo. Creando un pseudo-botón de la letra. una oculto dentro de un párrafo del texto es posible, pero un poco 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 actual aceptado, utilizando on ():

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

Escuchar un “hacer clic” evento en cualquier elemento con la clase .Haz click en mi, y luego registrar un mensaje en la consola que contiene el texto del elemento pulsado, harías:

$ (". 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 usa el esta Selector (que se refiere a cualquier objeto que jQuery esté tratando actualmente) - en este caso, la cosa en la que se hizo clic. Luego extraemos el texto de ese objeto en el que se hizo clic y lo registramos en la consola. Fácil a la derecha?

Detener la acción predeterminada:

En algún momento, querrá adjuntar a algo como un enlace o un botón de envío de formulario que generalmente hace otra cosa. En cuyo caso, es muy probable que no desee que se realice esa acción original, sino que desea realizar un AJAX de fantasía o una magia especial de jQuery..

Para evitar que ocurra esa acción predeterminada, tenemos un método práctico llamado preventDefault. Obviamente. Veamos cómo funcionaría 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, estamos adjuntando a la enviar evento en lugar de hacer clic. Esto es más apropiado cuando se trata de un formulario como el usuario podría espacio de tabulación, golpear entrar, o golpear un enviar Botón: todo lo cual activaría la acción predeterminada del formulario. También estamos pasando la variable de evento a la función anónima, por lo que podemos referirnos a la datos del evento. 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 probablemente tenga un controlador AJAX aquí, que abordaremos en la próxima lección.

Los eventos también pueden ser activados por usted

En los dos ejemplos anteriores, usamos el método on para escuchar un evento, pero también puede activar un evento manualmente llamándolo como un método en su lugar. Es difícil ver por qué puedes usar esto para forzar a un “hacer clic”, pero tiene más sentido si nos fijamos en el evento de enfoque.

El enfoque generalmente se usa con campos de entrada para lanzar 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 debe usar. Pero también puede usarlo para forzar al usuario en el campo de nombre de usuario cuando la página se haya cargado, para que puedan comenzar a escribir sus detalles de inicio de sesión inmediatamente..

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

Si también adjuntó un detector de eventos de enfoque a ese campo de nombre de usuario, también se activará cuando fuerce el enfoque. Los eventos pueden ser activados y escuchados.

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 datos de eventos.

Lo dejaré allí hoy a medida que nos acercamos al final de esta miniserie de tutoriales de jQuery. Debería, para el final, tener la suficiente confianza como para lanzar 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

Explore más sobre: ​​JavaScript, jQuery, Programación, Desarrollo Web.