Tutorial de jQuery (Parte 4)

Anuncio

Hoy vamos a mejorarlo y mostrar realmente 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 selectoresLa 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 algo de código y aprendamos cómo ... Lee mas (y todas las horribles llaves 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 funcionesEsto es parte de una introducción continua para principiantes 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 ... Lee mas . También te mostré cómo acceder al consola de desarrollador en Chrome

Resuelva los problemas del sitio web con las herramientas de desarrollador de Chrome o FirebugSi ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya se haya encontrado con algunos problemas de código y no sepa cómo solucionarlos. Cuando se enfrenta a un bit de código no funcional, es muy ... Lee mas 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 en la pantalla de su iPhone generará un solo "evento de toque" con una coordenada x, y de exactamente dónde tocó. 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. No es necesario que sea un "botón" específico: 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, utilizando en():

$(selector).en(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 incrustado 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, verdad?

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 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 (evento); event.preventDefault (); falso retorno; });

Algunos cambios aquí: en primer lugar, nos estamos uniendo al enviar evento en lugar de clic. Esto es más apropiado cuando se trata de un formulario como el usuario podría espacio de tabulación, golpear entraro 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 usamos el event.preventDefault () en combinación con falso retorno para evitar que se completen todas las acciones habituales.

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 ú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 "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.

$ (documento) .ready (función () { $ ('# 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é resultados 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, debe tener la confianza suficiente para lanzar un poco de jQuery en su página y hacer que haga algo. La próxima semana analizaremos 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.

Credito de imagen: Pantalla táctil a través de Shutterstock