Usuario:ManuelRomero/JavaScript/jquery/eventos

Eventos

 * Ya sabemos lo que son los eventos (acciones que ocurren sobre los objetos)
 * JQuery está preparado para interactuar con los eventos que ocurren sobre los objetos de nuestro dom
 * Vamos a exponer los principales eventos agrupándolos según el objeto que los origina
 * 1) Eventos de Ratón
 * 2) Eventos de Teclado
 * 3) Eventos de formulario
 * 4) Eventos de la ventana o documento

Como funcionan los eventos en jQuery

 * Tomemos el siguiente Ejemplo
 * El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
 * En el caso anterior sobre todas las anclas  del documento

Imagen:eventoJQuery.png
 * El tipo de evento lo definimos con la función click en este caso. Luego veremos una lista de eventos disponibles.
 * El evento recibe una función anónima como parámetro donde indicamos todas las acciones que queremos que se ejecuten cuando ocurra el evento.
 * Esta función anónima puede recibir como parámetro el objeto evento que se ha generado cuando ha ocurrido el evento


 * La función manejadora del evento tiene a su vez un parámetro miEvento que nos permite utilizar las propiedades o métodos del evento en cuestión.
 * En este caso utilizaremos el método preventDefault

Eventos del ratón

 * click
 * Sirve para generar un evento cuando se produce un clic en un elemento de la página.


 * dblclick
 * Para generar un evento cuando se produce un doble clic sobre un elemento.
 * Se generarán también dos eventos click


 * mousedown
 * Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
 * Sirve tanto para el botón derecho como el izquierdo del ratón.
 * Útil para drag&drop


 * mouseup
 * Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón.
 * El evento mouseup se produce sólo en el momento de soltar el botón.


 * mousemove
 * Evento que se produce al mover el ratón sobre un elemento de la página.


 * mouseover y mouseout
 * Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).


 * mouseenter y mouseleave
 * Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.


 * hover
 * Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.
 * A menudo utilizaremos este evento mejor en vez de mouseenter y mouseleave.


 * toggle
 * Esta función va a permitir alternar comportamientos sobre los objetos
 * Por defecto, sin parámetros nos va a permitir ocultar o mostrar elementos de nuestro dom (Si están visibles los oculta, si están ocultos los visualiza.

En este caso le podemos pasar parámetros para indicar por ejemplo la velocidad de visualización (slow, fast o milisegundos)

Solución


 * Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza cliks, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
 * También podemos usar este método para alternar la ejecución de varias funciones alternándose

Eventos relacionados con el teclado

 * Primero se ejecuta uno o varios eventos keydown, en función de si se mantiene o no la tecla pulsada. Luego uno o varios eventos keypress y luego un único evento keyup.
 * keydown
 * Se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene.
 * Funciona con todas las teclas.


 * keyup
 * Se ejecuta en el momento de liberar una tecla.
 * Funciona con todas las teclas.


 * keypress
 * Se ejecuta como respuesta a una pulsación e inmediata liberación de la tecla.
 * No se dispara con las teclas ALT, MAYS, CTRL.


 * Los navegadores almacenan de forma diferente las teclas pulsadas. La propiedad which del evento nos permitirá trabajar sin preocuparnos de ello.
 * Ejemplo: