Hoy vamos a estudiar a un nivel superior y realmente mostrar donde brilla jQuery –eventos . Si ha seguido  otros posts , ahora debería tener una comprensión bastante buena de la estructura del código básico de jQuery(Y todas las llaves 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 puede utilizarlo para depurar el código jQuery.

Eventos – entre otros usos – permiten reaccionar ante las cosas que suceden en la página y las interacciones del usuario – Al hacer clic, desplazamiento, y todas esas cosas de lujo.

¿Qué es un evento de todos modos?

Para los 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 generada internamente por algún otro proceso. Aplicaciones elegir qué eventos «escuche», y cuando se desencadena ese evento, pueden reaccionar de alguna manera.

Por ejemplo, dando golpecitos en la pantalla del iPhone va a generar un solo «evento grifo» con una coordenada x, y, precisamente, donde ha tocado. Si ha tocado en un objeto particular, como un botón, lo más probable es que el botón se escucha para ese evento y realizar alguna acción en consecuencia. Si fuera sólo una parte vacía de la interfaz, no se adjuntó al evento y así no pasará nada.

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

 

Fácil: Al hacer clic en

Tal vez el caso más fácil de escuchar es el evento click, disparó cuando un usuario hace clic en un elemento. Esto no tiene que ser un «botón» específica – se puede conectar un detector de eventos para cualquier cosa en la pantalla, pero como desarrollador web, es obvio que necesita para hacer que intuitivo. Creación de un falso botón de la letra a escondidas dentro de un párrafo de texto es posible, pero un poco estúpido.

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

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

Para escuchar un » clic «evento en cualquier elemento con la clase . ClickMe, y luego registrar un mensaje en la consola que contiene el texto del elemento se hace clic, usted haría:

$ ( ". ClickMe" ) . sobre ( "clic" , la función ( ) { 
consola . log ( $ ( este ) . texto ( ) ) ; 
} ) ;

Usted debe ser capaz de ver que la acción que hemos incorporado aquí es una función anónima que utiliza el presente de selección (que se refiere a cualquier objeto jQuery está tratando actualmente) – en este caso, lo que se ha hecho clic. A continuación, extraer el texto de ese objeto se hace clic y log a la consola. Fácil, ¿no?

Detener la acción por defecto:

En algún momento, tendrá que adjuntar a algo así como un enlace o botón de enviar formulario que suele hacer otra cosa. En cuyo caso, es bastante probable que no desea que la acción original que se lleva a cabo – en cambio, usted quiere hacer algo de fantasía AJAX o especial magia de jQuery.

Para evitar que la acción predeterminada suceda, tenemos un método muy útil llamado a preventDefault. Obviamente. Vamos a ver cómo funcionaría cuando se trata de un botón de envío de un formulario

$ ( "# myForm" ) . sobre ( "enviar" , la función ( evento ) { 
consola . log ( evento ) ; 
evento . preventDefault ( ) ; 
volver  falsa ; 
} ) ;

Unos pocos cambios aquí – en primer lugar, estamos adjuntando a la presente evento en lugar de hacer clic. Esto es más apropiado cuando se trata de una forma que el usuario puedatabuladores espacio , golpeó entrar , o golpear un presentará botón – todo lo cual daría lugar a la acción predeterminada del formulario. También estamos pasando la variable de evento en la función anónima, por lo que podemos hacer referencia a los datos de eventos . A continuación, hemos utilizado la event.preventDefault () en combinación con return false para detener todas las acciones habituales de completar.

En este caso, sólo está registrando el evento para la consola, pero en realidad probablemente tendría un controlador de AJAX aquí, que vamos a hacer frente en la próxima lección.

Los eventos también pueden ser provocados por Usted

En los dos últimos 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 habitualmente con los campos de entrada para disparar un mensaje cuando el usuario hace clic en el cuadro para introducir texto – un mensaje de instrucción en el formato que desea utilizar, por ejemplo. Pero también se puede usar para forzar al usuario en el campo de nombre de usuario cuando la página se ha cargado – por lo que puede comenzar inmediatamente a escribir sus datos de acceso.

$ ( documento ) . listo ( función ( ) { 
$ ( '# nombre de usuario' . centrarse ( ) ; 
} ) ;

Si también hubiera adjuntado un detector de eventos de enfoque a dicho campo nombre de usuario, también se activaría cuando se ven obligados enfoque. Eventos por lo tanto, pueden ser tanto activan y escucharon a.

 

Por ahora, la práctica uniendo a varios eventos de la página – usted puede encontrar una lista completa de todos los eventos disponibles aquí – recuerde utilizar 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 jQuery. Debe, por el final de la misma, ser lo suficientemente seguras como para arrojar algo de jQuery en tu página y hacer que haga algo. La semana que viene vamos a ver AJAX – una parte importante de la web moderna que le permite cargar y enviar las solicitudes en el fondo sin interrumpir al usuario.

Como siempre, opiniones, preguntas, comentarios y problemas bienvenidos a continuación, o enviar sus preguntas a nuestros propios MakeUseOf Respuestas .

Fuente aqui