Tutorial jquery (parte 4) - los detectores de eventos

Hoy vamos a patear a un nivel superior y realmente mostrar donde brilla jQuery - eventos. Si ha seguido los últimos tutoriales, ahora debería tener una comprensión bastante buena de la Estructura del código básico de jQuery (Y todos los apoyos rizados horribles que van con él), así como la forma en encontrar elementos del DOM y algunas de las cosas que puede hacer para manipularlos. También les mostró cómo acceder a la consola de desarrollador en Chrome y cómo se puede utilizar para depurar el código de jQuery.jQuery Tutorial - Introducción: Conceptos básicos & selectoresjQuery Tutorial - Introducción: Conceptos básicos & selectoresLa semana pasada, hablé de la importancia de jQuery es que cualquier desarrollador web moderno y por qué es impresionante. Esta semana, creo que es el momento tenemos en nuestras manos sucias con algo de código y aprendimos ...Lee mas

Eventos - entre otros usos - permiten reaccionar a las cosas que suceden en la página del usuario y de las interacciones - clic, desplazamiento, y todas esas cosas de fantasía.

¿Qué es un evento de todos modos?

Para los nuevos en la programación que involucra una interfaz gráfica de algún tipo, eventos se refieren a cualquier tipo de interacción entre el usuario y la aplicación- o puede ser generada internamente por algún otro proceso. Aplicaciones elegir qué eventos “escuchar a”, y cuando se active ese evento, pueden reaccionar de alguna manera.

Vídeo: Tutorial jQuery 5 - Eventos (on, off, one)

Por ejemplo, toque en la pantalla de su iPhone generará un único “caso del grifo” con una coordenada x, y, precisamente, en el que ha tocado. Si ha tocado en un objeto particular, como un botón, lo más probable es que el botón estaba escuchando para ese evento y realizar alguna acción en consecuencia. Si fuera sólo una parte en blanco de la interfaz, nada se asocia al evento y así no pasará nada.

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

Fácil: Al hacer clic

Tal vez el caso más fácil de escuchar para es el evento click, despedido cada vez que un usuario hace clic en un elemento. Esto no es necesariamente un “botón” específica - se puede conectar un detector de eventos para nada en la pantalla, sino como un desarrollador web, es obvio que necesita para hacer que intuitivo. La creación de un falso botón de la letra un oculto dentro de un párrafo de texto es posible, pero un tanto estúpida.

Los métodos para la fijación de un detector de eventos han cambiado significativamente en los últimos años como jQuery ha desarrollado, pero este es el método aceptado actual, utilizando el ():

ps(selector).en(evento,acción)-

Para escuchar un “hacer clic”Evento sobre cualquier elemento con la clase .Haz click en mi, y luego ingrese un mensaje a la consola que contiene el texto del elemento hace clic en, puede hacer:

ps(".Haz click en mi").en("hacer clic",función(){consola.Iniciar sesión(ps(esta).texto())-})-

Usted debe ser capaz de 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 jQuery está tratando actualmente) - en este caso, lo que se ha hecho clic en. A continuación, extraer el texto de ese objeto se hace clic y log a la consola. Fácil, ¿verdad?

Detener la acción por defecto:

En algún momento, tendrá que adjuntar a algo así como un enlace o botón que suele formar hace otra cosa presenten. En este caso, es muy probable que no desea que la acción original que se lleva a cabo - en su lugar, usted quiere hacer alguna fantasía o AJAX jQuery magia especial.

Para evitar que la acción predeterminada suceda, tenemos un método práctico llamado a preventDefault. Obviamente. Vamos a ver cómo funcionaría cuando se trata de un botón de enviar un formulario

ps("#myForm").en("enviar",función(evento){consola.Iniciar sesión(evento)-evento.preventDefault()-regreso falso-})-

Unos pocos cambios aquí - en primer lugar, que están vinculados a la enviar evento en lugar de clic. Esto es más apropiado cuando se trata de una forma como la fuerza del usuario tabuladores espacio, golpear entrar, o golpear una enviar Botón - todos los cuales daría lugar a la acción por defecto de forma. También estamos pasando la variable evento en la función anónima, por lo que podemos hacer referencia a la datos de eventos. Hemos utilizado entonces la event.preventDefault () en combinación con falso retorno para detener todas las acciones habituales de completar.

Vídeo: Tutorial jQuery 32: Método POST

En este caso, es sólo registrar el evento a la consola, pero en realidad es probable que tenga un controlador AJAX aquí, que vamos a hacer frente en la siguiente lección.

Los eventos también pueden ser provocados por Usted

En los últimos dos ejemplos, se utilizó el método de escuchar a un evento, pero también se puede activar manualmente un evento llamando como un método en su lugar. Es difícil ver por qué es posible usar esto para forzar un “clic”, pero tiene más sentido si nos fijamos en el evento de foco.

El enfoque se utiliza normalmente con los campos de entrada para disparar un mensaje cuando el usuario hace clic en la casilla para introducir texto - un mensaje de instrucción en el formato a utilizar, por ejemplo. Pero también se podría utilizar para forzar al usuario en el campo nombre de usuario cuando la página se ha cargado - por lo que puede comenzar inmediatamente a escribir sus datos de acceso.

ps(documento).Listo(función(){ps(`#username`.atención()-})-

Si también se habían unido un detector de eventos de enfoque a dicho campo nombre de usuario, sino que también se activaría cuando se ve obligado enfoque. Eventos por lo tanto, pueden ser provocados tanto y escucharon a.

Por ahora, la práctica uniendo a varios eventos en la página - usted puede encontrar un listado completo de todos los eventos disponibles aquí - recuerde usar preventDefault si es un enlace o botón, y ver lo que la salida que se obtiene de la consola sobre datos de eventos.

Lo dejo ahí hoy en día, ya que cerca del final de esta mini-serie de tutoriales de jQuery. Usted debe, por el final de la misma, será suficiente confianza para tirar un poco de jQuery en su página y hacer que haga algo. La próxima semana vamos a ver AJAX - una parte importante de la web moderna que le permite cargar y enviar solicitudes en el fondo sin interrumpir al usuario.

Como siempre, comentarios, preguntas, comentarios y problemas dan la bienvenida a continuación.